页面向上或向下滚动时的移动图像
提问于 2017-04-21 15:20:18
希望你做得很好。一如既往，任何帮助都是非常感谢的。
我想弄清楚如何用页面滚动来上下移动图像。
代码：
<div class="container">
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img src="https://placehold.it/150x150" alt="" />
</div>
</div>当你向下滚动(页面)时，图像会移动到最大值，比如10 up，然后向上滚动，它们会返回到原来的位置。当滚动发生时，图像需要移动。
我尝试过用$(窗口).scroll动画，但是图像只移动一次。
回答 1
Stack Overflow用户
发布于 2017-04-21 15:47:09
您可以动画图片或div的这段代码。
这不是一次性的动画。它动画寻找当前滚动位置。
代码片段:带有位置的滚动
var container = document.getElementById('container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var image1 = document.getElementsByClassName('image')[0];
var image2 = document.getElementsByClassName('image')[1];
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || window.scrollTop;
var scrollPercent = scrollTop/scrollArea || 0;
image1.style.bottom = scrollPercent*window.innerWidth + 'px';
image2.style.right = scrollPercent*window.innerWidth + 'px';
});body {
overflow-x: hidden;
}
.container {
width: 100%;
height: 1000px;
}
.image {
position: absolute;
width: 150px;
height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="imagecontainer">
<img class="image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="imagecontainer">
<img class="image" src="https://placehold.it/150x150" alt="" />
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43553383
复制相关文章
腾讯云开发者
