在同一页面中从不同的 div 滚动多次
onscroll many times in the same page from different divs
我正在尝试创建一个页面,其中显示图片并在您向下滚动时稍微向上滑动。我正在使用这段代码,但我无法让它适用于不止一张图片,而且我也找不到一种方法来指定滚动功能必须从 div 开始,而不是从 div 的顶部开始页面(我不太了解 javascript)。谁能帮我?谢谢
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("box").className = "slideUp";
}
}
</script>
<style>
html{width:100%;}
body{height:1500px;}
contenitore{height:890px; width:600px; margin-left:90px; padding:0; float:left; margin-right:90px; margin-top:60px;}
.box{float:left; width:200px; height:200px; margin-top:350px; }
.box2{float:left; width:200px; height:200px; margin-top:350px; margin-left:100px; visibility:hidden; }
.box3{float:left; width:200px; height:200px; margin-top:350px; margin:50px; }
.slideUp {animation-name: slideUp;-webkit-animation-name: slideUp;animation-duration: 1s;-webkit-animation-duration: 1s; visibility: visible;}
@keyframes slideUp {0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1;-webkit-transform: translateY(0%);}}
@-webkit-keyframes slideUp {0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1;-webkit-transform: translateY(0%);}}
</style>
<!DOCTYPE html>
<html>
<body>
<div class="box2">
<div id="box"><img src="img/IMG_2997.jpg" width="100%"></div>
</div>
<div class="box2">
<div id="box"><img src="img/IMG_2983.jpg" width="100%"></div>
</div>
</body>
</html>
您正在使用 getElementById('id')
获取具有指定 ID 的第一个元素,因为 ID 应该是唯一的并且在文档中只使用一次。
要获取多个元素,您可以使用 getElementsByClassName('class')
,这将 return 一个您可以遍历的节点列表。
示例:
var myNodeList = document.getElementsByClassName('class');
for (var i = 0; i < myNodeList.length; i++) {
var item = myNodeList[i];
//do something with item
}
我正在尝试创建一个页面,其中显示图片并在您向下滚动时稍微向上滑动。我正在使用这段代码,但我无法让它适用于不止一张图片,而且我也找不到一种方法来指定滚动功能必须从 div 开始,而不是从 div 的顶部开始页面(我不太了解 javascript)。谁能帮我?谢谢
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("box").className = "slideUp";
}
}
</script>
<style>
html{width:100%;}
body{height:1500px;}
contenitore{height:890px; width:600px; margin-left:90px; padding:0; float:left; margin-right:90px; margin-top:60px;}
.box{float:left; width:200px; height:200px; margin-top:350px; }
.box2{float:left; width:200px; height:200px; margin-top:350px; margin-left:100px; visibility:hidden; }
.box3{float:left; width:200px; height:200px; margin-top:350px; margin:50px; }
.slideUp {animation-name: slideUp;-webkit-animation-name: slideUp;animation-duration: 1s;-webkit-animation-duration: 1s; visibility: visible;}
@keyframes slideUp {0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1;-webkit-transform: translateY(0%);}}
@-webkit-keyframes slideUp {0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1;-webkit-transform: translateY(0%);}}
</style>
<!DOCTYPE html>
<html>
<body>
<div class="box2">
<div id="box"><img src="img/IMG_2997.jpg" width="100%"></div>
</div>
<div class="box2">
<div id="box"><img src="img/IMG_2983.jpg" width="100%"></div>
</div>
</body>
</html>
您正在使用 getElementById('id')
获取具有指定 ID 的第一个元素,因为 ID 应该是唯一的并且在文档中只使用一次。
要获取多个元素,您可以使用 getElementsByClassName('class')
,这将 return 一个您可以遍历的节点列表。
示例:
var myNodeList = document.getElementsByClassName('class');
for (var i = 0; i < myNodeList.length; i++) {
var item = myNodeList[i];
//do something with item
}