在学习右侧悬浮框之前,我对这个offsetLeft(理解了offsetLeft就理解了offsetTop)有疑惑
对offsetLeft的理解:
右侧悬浮框:
代码如下:
<style type="text/css">
#box{
width: 100px;
height: 150px;
background-color: red;
position: absolute;
right: 0;
bottom:0;
}
</style>
<script type="text/javascript">
window.οnscrοll=function(){
var oBox=document.getElementById('box');
var scroMove=document.documentElement.scrollTop||document.body.scrollTop;
// oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+scroMove+'px';
var iTarget=document.documentElement.clientHeight-oBox.offsetHeight+scroMove;
startMove(iTarget);
};
var timer=null;
function startMove(iTarget){
var oBox=document.getElementById('box');
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-oBox.offsetTop)/3;
speed=(speed>0?Math.ceil(speed):Math.floor(speed));
if(oBox.offsetTop==iTarget){
alert(oBox.offsetTop);
clearInterval(timer);
}else{
oBox.style.top=oBox.offsetTop+speed+'px';
}
},30);
}
</script>
</head>
<body style="height:2000px">
<div id="box"></div>
</body>