Question

我正在尝试创建一个图片显示的页面，并在向下滚动时稍微向上滑动。我正在使用此代码，但我不能使它适用于多个图片，而且我找不到指定滚动功能必须从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>

Answer 1

您使用getElementById('id')获取具有指定ID的第一个元素，因为ID应该是唯一的，并且只在文档中使用一次。

要获得多个元素，可以使用getElementsByClassName('class')，这将返回一个可以迭代的节点列表。

示例：

var myNodeList = document.getElementsByClassName('class');
for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];
  //do something with item
}

在不同div的同一页面中多次滚动

1 个答案: