首页 > 代码库 > 吸顶条+大图加载滚动
吸顶条+大图加载滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.box{ position:relative;padding:50px; border-bottom:1px solid red;}
.box img{ display:block;width:1200px;height:800px;}
</style>
<script>
window.onload=function()
{
var aImg=document.getElementsByTagName(‘img‘);
//
//第一屏
var winH=document.documentElement.clientHeight;
for(var i=0;i<aImg.length;i++)
{
aImg[i]._top=getPos(aImg[i]).top;
if(aImg[i]._top<winH)
{
aImg[i].src=http://www.mamicode.com/aImg[i].getAttribute(‘_src‘);
aImg[i].b=true; //已经切换
};
};
var oBox1=document.getElementById(‘box1‘);
var oBox2=document.getElementById(‘box2‘);
var Top=getPos(oBox1).top;
window.onscroll=function()
{ var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var winH=document.documentElement.clientHeight;
{for(var i=0;i<aImg.length;i++)
{
if(aImg[i].b)continue;
if(aImg[i]._top<=winH+scrollTop)
{
//aImg[i].src=http://www.mamicode.com/aImg[i].getAttribute(‘_src‘);
(
function(index){
var oImg=new Image();
oImg.onload=function()
{
aImg[index].src=http://www.mamicode.com/this.src;
};
oImg.src=http://www.mamicode.com/aImg[i].getAttribute(‘_src‘);
})(i);
aImg[i].b=true;
};
if(scrollTop>=Top)
{
oBox1.style.position=‘fixed‘;
oBox1.style.left=0;
oBox1.style.top=0;
oBox2.style.display="block";
}
else
{
oBox1.style.position="";
oBox2.style.display="none";
};
};
};
};
};
function getPos(obj)
{
var l=0;
var t=0;
while(obj)
{
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
};
return {left:l,top:t};
};
</script>
</head>
<body>
<div class="box">
<img _src="http://img2.3lian.com/img2007/23/15/001.jpg">
</div>
<div class="box">
<img _src="http://img2.3lian.com/img2007/23/15/002.jpg">
</div>
<div class="box">
<p><img _src="http://img2.3lian.com/img2007/23/15/003.jpg"></p>
</div>
<div id="box1" style="display:block;right:0; width:100%; padding:10px; text-align:center; font-weight:bold;background:#ccc; z-index:5555;">
身体和灵魂总要有一个在路上。。。</div>
<div style="height:120px;display:none;" id="box2"></div>
</div>
<div class="box">
<img _src="http://img2.3lian.com/img2007/23/15/005.jpg">
</div>
<div class="box">
<img _src="http://img2.3lian.com/img2007/23/15/006.jpg">
</div>
<div class="box">
<img _src="http://img2.3lian.com/img2007/23/15/007.jpg">
</div>
<div class="box">
<img _src="http://img2.3lian.com/img2007/23/15/008.jpg">
</div>
<div class="box">
<img _src="http://img2.3lian.com/img2007/23/15/009.jpg">
</div>
</body>
</html>
吸顶条+大图加载滚动