代码：<!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>运行结果： 初始界面： 
不断滑动页面滚动条之后界面： 
时间： 2024-09-29 02:37:11