您的位置：首页 > Web前端 > JavaScript

JavaScript实现右侧悬浮框

2016-01-30 15:14 645 查看

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)
//来进行我们饿缓冲运动滴呀
}

未完待续;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航