javascript 在滚动时更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15861645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change image on scroll
提问by pudelhund
On my website is a fixed image. This image should be "animated", meaning that the single frames of the animation should be iterated. So the idea is to have an array of images and that every time the user scrolls, the array is iterated and the displayed image changes, thus creating an animation. I'm not that accustomed to using JS, thus I don't really know where to start. The only thing I have is the CSS:
在我的网站上是一个固定的图像。这个图像应该是“动画”的，这意味着动画的单帧应该被迭代。所以这个想法是有一个图像数组，每次用户滚动时，数组都会被迭代，显示的图像会发生变化，从而创建一个动画。我不太习惯使用 JS，因此我真的不知道从哪里开始。我唯一拥有的是 CSS：
#animation {
background-repeat: no-repeat;
position : fixed;
width: 980px;
margin: 0 auto;
}
回答by Miljan Puzovi?
Ok, I've created example for fixed number of images that will be used in "movie/animation". In this case, the number is 5. Script will get image of site's height and whole animation (5 frames) will have lenght of site's lenght. I've preloaded and hide images that will be used in animation just to make sure that animation will work smooth.
好的，我已经为将在“电影/动画”中使用的固定数量的图像创建了示例。在这种情况下，数字为 5。脚本将获取站点高度的图像，整个动画（5 帧）将具有站点长度的长度。我已经预加载并隐藏了将在动画中使用的图像，只是为了确保动画能够流畅运行。
HTML
HTML
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>
<!-- Next image is used for first frame, before scroll -->
<img src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" id="animation" />
<div id="bottommark"></div>
CSS
CSS
.hidden {
position: absolute;
top: -9999999px;
}
#bottommark {
position: absolute;
bottom: 0;
}
#animation {
background-repeat: no-repeat;
position : fixed;
top: 0;
width: 980px;
margin: 0 auto;
}
body, html {
height: 1000px; /* just for DEMO */
margin: 0;
}
jQuery
jQuery
$(document).ready(function(){
var offset2 = $(document).height();
var lineHF = offset2 - $("#bottommark").position().top;
$(window).scroll(function(){
var offset1 = $(document).height();
var offset = $(window).scrollTop();
var lineH = offset1 - $("#bottommark").position().top - offset;
var lineHpart = lineHF/5; //just in case animation have 5 frames/images
//below is code in case that animation have 5 frames.
//If number of frames is different, edit code (add/remove if loops)
$("span").html(lineH);
if (lineH > lineHpart*4) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg");
}
if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg");
}
if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg");
}
if (lineH < lineHpart*2 && lineH > lineHpart*1) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg");
}
if (lineH < lineHpart) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg");
}
});
});
