极客教程JavaScript/jQuery 如何使图像以重叠滚动的形式出现
在本文中，我们将讨论如何通过滚动一个图像使另一个图像出现。当我们滚动一个图像时，会有一个图像在屏幕上显示出来。当我们点击屏幕上显示的任何按钮时，会显示一个图像作为加载过程的一部分，然后这些操作也会显示在显示屏上。在这两种方法中，我们将了解如何滚动图像并显示另一页。我们将了解如何使用jQuery在显示屏上正确地通过滚动呈现图像。
方法一：滚动时隐藏图像
我们通过创建一个函数来滚动图像、增加和减小图像的尺寸。当我们向上滚动页面时，图像将向上滚动。
示例1: 这个示例演示了一个图像在滚动过程中重叠显示的效果。在这里，我们在滚动时隐藏了图像。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content= "width=device-width,
initial-scale=1.0">
<title>Image Scrolling</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<style>
.img{
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color:green" class="GFG">
GeeksForGeeks
</h1>
<h2>Image Scrolling</h2>
<div style="margin-top:150px;">
Please scroll down slowly to see effect.
</div>
<div style="margin-top:150px;">
Please scroll down slowly to see effect.
</div>
<div class="myimgDiv">
<img class="img"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230128220855/download.jpg"
alt="Manager"
class="img-responsive img-thumbnail"/>
</div>
<div style="margin-top:100px;">
Please scroll up slowly to see effect.
</div>
<div style="margin-top:100px;">
Please scroll up slowly to see effect.
</div>
<script>
(window).scroll(function() {
if ((this).scrollTop()>700){
('.myimgDiv').hide(1000);
}
else{
(document).ready(function() {
var images = ('#scrolling-container img');
var width = images[0].width;
var currentImage = 0;
setInterval(function() {
currentImage++;
if (currentImage === images.length) {
currentImage = 0;
}
('#scrolling-container').animate({
scrollLeft: currentImage * width
}, 1000);
}, 2000);
});
$('.myimgDiv').show(1000);
}
});
</script>
</body>
</html>
输出：
方法2： 通过设置在显示屏上显示的图片来改变页面。
在这种方法中，我们将创建两个页面，并在这些页面之间添加图像滚动。当我们点击一个按钮/链接时，一个滚动图片将在屏幕上显示一段时间。我们直接将第一个页面移动到第二个页面的标题，反之亦然。
示例2： 此示例演示了一个图像在滚动时覆盖另一个图像的外观。在这里，通过设置在显示屏上显示的图片来改变页面。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content= "width=device-width,
initial-scale=1.0">
<title>Transition</title>
<style>
.loader {
position: absolute;
width: 100%;
height: 100vh;
z-index: 99;
left: -100%;
transition: .1s;
}
img {
position: absolute;
left: 15%;
top: -2%;
width: 22%;
height: 30%;
}
.page1 {
position: absolute;
width: 100%;
height: 100vh;
}
.page2 {
position: absolute;
width: 100%;
height: 100vh;
display: none;
}
h4 {
margin-left: 15%;
font-size: 25px;
color: green;
}
a {
margin-left: 16.9%;
font-size: 15px;
padding: 4px 8px;
border: 2px solid black;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
}
a:hover {
color: white;
background-color: black;
}
.gfg {
margin-left: 280px;
margin-top: -20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="loader"
id="loader">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230128220855/download.jpg"
alt="gfg_img">
</div>
<div class="page1" id="page1">
<h4> GeeksforGeeks 1st </h4>
<h5 class="gfg">Image Scrolling</h5>
<a onclick="appearP2() ">Image Scroll</a>
</div>
<div class="page2" id="page2">
<h4> GeeksforGeeks 2nd </h4>
<h5 class="gfg">Image Scrolling</h5>
<a onclick="appearP1() ">Image Scroll</a>
</div>
<script>
// Function for page one
function appearP2() {
// Code for loader and both pages
var loader = document.getElementById('loader');
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
loader.style.left = "0";
// Timeout method which will display our
// next page and block first page
setTimeout(function () {
loader.style.left = "-100%";
page1.style.display = "none";
page2.style.display = 'block';
// Set time 2000 to show transition
}, 2000)
}
// Function for page two
function appearP1() {
// Code for loader and both pages
var loader = document.getElementById('loader');
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
loader.style.left = "0";
// Timeout method which will display our next page
// and block second page
setTimeout(function () {
loader.style.left = "-100%";
page1.style.display = "block";
page2.style.display = 'none';
// Set time 2000 to show transition
}, 2000)
}
</script>
</body>
</html>
输出：
