悬浮框是一直固定在窗口的某一位置的,我们假设固定在底部的;

先要实现基础功能;

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 50px;height: 200px;background: red;position: absolute;right: 0;bottom: 0;}
</style>
<script>
window.onscroll=function(){
var oDiv=document.getElementById('div1');
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//移动的高度;

oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';//=当前客户端的高度-oDiv的高度+移动的高度。
}
</script>
</head>
<body style="height: 2500px;">
<div id="div1"></div>
</body>
</html>

用定时器处理后的代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 50px;height: 200px;background: red;position: absolute;right: 0;bottom: 0;}
</style>
<script>
window.onscroll=function(){
var oDiv=document.getElementById('div1');
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//移动的高度;

//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';//=当前客户端的高度-oDiv的高度+移动的高度。
startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
};

var timer=null;
function startMove(itarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=(itarget-oDiv.offsetTop)/6;
var speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv.offsetTop==itarget){
clearInterval(timer)
}else{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
},30)
}
</script>
</head>
<body style="height: 2500px;">
<div id="div1"></div>
</body>
</html>

现在是做在涤棉的,如果想做成中间,可以改下代码:

startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));

运动框架总结:

<script>
var timer=null;//声明定时器
function startMove(iTarget){
oDiv=document.getElementById("div1");
clearInterval(timer);//清空定时器
timer=setInterval(function(){
var speed=(iTarget-broszhu)/10;//开启定时器后,然后声明speed速度;
speed=speed>0?Math.ceil(speed):Math.floor(speed); //speed有2种清空,可能是正或者负数的,所以要向上和向下取整;
if(iTarget=broszhu){
clearInterval(timer);//如果达到目标,就停止
}else{
zzzzz=xxxxx+speed+'px';//如果达不到目标,就+速度来达到;
}
},30)
}
</script>

···