JavaScript实现右侧悬浮框
HTML代码：
<body> <div id="div1"> </div> </body>
css代码：
#div1{ height:150px; width:100px; background:red; position:absolute; right:0px; bottom:0px; } body{ height:2000px; }
javascript代码
//当窗体滚动的时候滴呀 window.onscroll=function (){ var obj=document.getElementById("div1"); //考虑到浏览器的兼容性滴呀(被卷去的高度) var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; //浏览器可视区域的高度+物体自身的高度+被卷曲的高度 // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px'; //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop; //move(targetLen); //这样我们就完成了基本的人物我滴 //方式二：结果他是要抖动滴呀 //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop; //move(targetLen); var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop); move(targetLen); //这样我们的基本功能算是实现了滴呀 } //这里我们俩加上一个缓冲运动滴呀，这样才方便我们去这些事情滴呀 var Timer=null; function move(iTarget){ clearInterval(Timer);//先清除 var obj=document.getElementById("div1"); Timer=setInterval(function (){ //距离上面物体的距离滴呀 var speed=(iTarget-obj.offsetTop)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); //先获取我们的速度滴呀 if(obj.offsetTop==iTarget){ clearInterval(timer); //到达目的之后，我们就清除元素滴呀 }else{ obj.style.top=obj.offsetTop+speed+'px'; } },30) //来进行我们饿缓冲运动滴呀 }
未完待续;