我有一张随着用户向下滚动而变化的图片(请参见下面的代码)。
目前,它从滚动开始点开始,但我希望它只在用户滚动到页面上的特定点(或像素)时才开始改变。
我需要在下面添加什么才能做到这一点?预先感谢您的帮助和回复。
<div class='fauxcolumn-outer fauxcolumn-right-outer'>
<div style='position:relative'/>
<style>
#photo { position: absolute; top:3px; right:29px; z-index:1 }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script>
var urls = [
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg",
"http://abcd.jpg"
];
$(function(){
$(window).scroll(function(){
var i = Math.min(Math.floor($(window).scrollTop()/50), urls.length-1)
$("#photo img").attr("src", urls[i]);
});
});
</script>
<body>
<div id='photo'><img src='http://abcd.jpg'/>
</div>
</body>