<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>页面随滚动条滚动--楚天雪饮:113620616</title>
</head>
<body style="height :2000px;">
<div style ="border :solid 1px red; height:200px; width :100%; z-index :1; position :absolute;top:10px" id ="div1">1</div>
<div style ="border :solid 1px black; height:200px;width :100%;z-index :2;position :absolute;top :220px;" id ="div2">2</div>
<div style ="border :solid 1px blue; height:200px;width :100%;z-index :3;position :absolute;top :430px;" id ="div3">3</div>
<div style ="border :solid 1px green; height:200px;width :100%;z-index :4;position :absolute;top :640px;" id ="div4">4</div>
<script language ="javascript" type ="text/javascript" >
//绑定滚动条事件
window.onload =function(){
if(document.all)
{
window.attachEvent ("onscroll",scroll);
}
else
{
window.addEventListener('scroll', function(){scroll();}, true);
}
};
//开始滚动
function scroll()
{
var top;
//var left;
if(document.all )
{
top=document.documentElement .scrollTop;
//left=document.documentElement .scrollLeft;
}
else
{
top=window.pageYOffset;
//left=window.pageXOffest;
}
if(top>10) document.getElementById ("div1").style.top=top+"px";
else document.getElementById ("div1").style.top="10px"
if(top>220) document.getElementById ("div2").style.top=top+"px";
else document.getElementById ("div2").style.top="220px"
if(top>430)document.getElementById ("div3").style.top=top+"px";
else document.getElementById ("div3").style.top="430px"
if(top>640) document.getElementById ("div4").style.top=top+"px";
else document.getElementById ("div4").style.top="640px"
}
</script>
</body>
</html>
5655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
