1、当前滚动的地方的窗口顶端到整个页面顶端的距离：
var winPos = $(window).scrollTop();
2、获取指定元素的页面位置：
$(val).offset().top;
3、对页面滚动条滚动的监听：要放在页面加载的时候
$(window).scroll(function(event){
});
4、设置滚动条到指定位置。$(window).scrollTop(offset)。
浏览器滚动到显示区域加载图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态图片加载</title>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<style>
.imgbox .clrow{
margin: 50px 50px;
}
.clrow img{
width: 400px;
height: 400px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
imgLoader();
$(window).scroll(function(){
imgLoader();
});
});
function imgLoader(){
$("img").each(function(){
if($(this).attr("src") == ""){
if(($(this).offset().top + $(this).height()/2) < ($(window).height()+$(window).scrollTop())){
$(this).attr("src",$(this).attr("src-x"));
}
}
});
}
</script>
</head>
<body>
<div class="imgbox">
<div class="clrow">
<img src="" src-x="img/1.jpg">
<img src="" src-x="img/2.jpg">
<img src="" src-x="img/3.jpg">
</div>
<div class="clrow">
<img src="" src-x="img/4.jpg">
<img src="" src-x="img/5.jpg">
<img src="" src-x="img/6.jpg">
</div>
<div class="clrow">
<img src="" src-x="img/7.jpg">
<img src="" src-x="img/8.jpg">
<img src="" src-x="img/9.jpg">
</div>
<div class="clrow">
<img src="" src-x="img/10.jpg">
<img src="" src-x="img/11.jpg">
<img src="" src-x="img/12.jpg">
</div>
<div class="clrow">
<img src="" src-x="img/13.jpg">
<img src="" src-x="img/14.jpg">
<img src="" src-x="img/15.jpg">
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
