<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>側边滚动运动</title> <style type="text/css"> #div1 { width: 100px; height: 100px; position: absolute; background: green; right: 0px; } body { height: 1000px; } </style> </head> <script type="text/javascript"> window.onload = function() { document.onscroll = function() { var oDiv1 = document.getElementById("div1"); var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop; var iClientHeight = document.documentElement.clientHeight || document.body.clientHeight; var i = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2; //oDiv1.style.top = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px"; // oDiv1.innerHTML = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px"; startMove(oDiv1, parseInt(i));//paserInt是防止抖动,目标点取整 }; var oTimer = null; function startMove(obj, iTarget) { clearInterval(oTimer); oTimer = setInterval(function() { //速度 var iSpeed = (iTarget - obj.offsetTop) /8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整 if (obj.offsetTop == iTarget) { clearInterval(oTimer); } else { obj.style.top = obj.offsetTop + iSpeed + "px";//层运动 }; }, 30); }; }; </script> <body> <div id="div1"> </div> </body> </html>
版权声明:本文博主原创文章。博客,未经同意不得转载。
时间: 2024-10-20 13:30:53