运动——对联悬浮框

代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div {
width: 100px;
height: 150px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
// window.onscroll 滚动页面时触发
window.onscroll=function() {
var oDiv = document.getElementById("div");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//一般只用前者
startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop));
//clientHeight:内容可视区域的高度,其中变量主要表示高度在页面浏览器所能看到的区域中央
};
var timer=null;//timer一定要放在函数外,clearInterval(timer)才能起作用

function startMove(iTarget){
var oDiv = document.getElementById("div");

clearInterval(timer);//保证函数中永远只有一个定时器,防止效果叠加,比如运动不断加速或透明度不断加大
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetTop)/4;//4 只是用来设置速度快慢,可以自定义(越大速度越慢)
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//Math.ceil():向上取整;Math.floor()向下取整;取整speed是为了防止speed和iTarget有误差而导致窗口在悬浮位置抖动
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}else{
document.title=iTarget;//获取当前目标的值
document.getElementById("txt").value=oDiv.offsetTop;
oDiv.style.top=oDiv.offsetTop+speed+'px';

}
},30);



}
</script>
</head>

<body style="height:2000px;">
<input type="text" id="txt" style="position:fixed; right:0; top:0;"/>

<div id="div"></div>
</body>
</html>
运行结果:
  初始界面:
      
 
  不断滑动页面滚动条之后界面:
          




你可能感兴趣的:(运动——对联悬浮框)