程序博客网 > js 设置class 的样式

右侧悬浮框

来源：互联网发布：js 设置class 的样式编辑：程序博客网时间：2024/05/16 18:03

在学习右侧悬浮框之前，我对这个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.onscroll=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>

0 0

js 设置class 的样式

js 设置class 的样式

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子子午谷子午子午胎子午岭子午冲战争子午线子午鸳鸯拐子午面子午岭旅游子午银滩子午养生桩子午流注时间表子午线是什么子午流注顺口溜本初子午线在哪子午流注开穴法易中天评价子午谷奇谋子午线禁止未成年人进入子午流注十二时辰全钢子午线轮胎子午线轮胎价格本初子午线的经度米其林子午线轮胎价格子午线轮胎和斜交胎的区别子午兼癸丁阳宅详解子午流注12时辰养生法本初子午线是什么的分界线子厚子厚是谁孽子之叔侄九叔子醉今迷嫂借叔子叔子与嫂夫人子撑父受子攻父受我家小受总想挖我的心火棘子佐鸣子h浴室鸣受系列苏子叶单子叶植物双子叶植物子叶