效果:
思路:
首先,加载 onscroll 控制滚动条。然后写缓存运动的方法,缓冲运动的方法是先计算出 DIV 缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点。最后将其参数返回。再在 onscroll 里面调用此方法,并且将终点计算出来赋予此方法的参数。
代码:
- <head runat="server">
- <title></title>
- <style type="text/CSS">
- #div1
- {
- width: 200px;
- height: 200px;
- background: #0000FF;
- position: absolute;
- right: 0;
- bottom: 0;
- }
- </style>
- <script type="text/javascript">
- window.onscroll = function () {
- var oDiv = document.getElementById('div1');
- var DivScroll = document.documentElement.scrollTop || document.body.scrollTop; //获取移动高度
- // oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
- move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //调用传参,其中里面的参数是DIV要走的终点。也就是(可视高度-DIV高度)/2+移动高度
- };
var timer = null; function move(end) {clearInterval(timer); // 首先,先关闭之前如果有开启的 setInterval; timer = setInterval(function () {var oDiv = document.getElementById('div1'); var speed = (end - oDiv.offsetTop) / 5; // 计算 DIV 要走的速度,DIV 要走的速度就等于(终点 - offsetTop 高度)/ 缩放系数 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 为了避免小数,将其取整 if (oDiv.offsetTop == end) {// 当 DIV 到达终点,则关闭 setInterval; clearInterval(timer); } else {oDiv.style.top = oDiv.offsetTop + speed +'px'; // 移动 div} }, 30); }
来源: http://www.phperz.com/article/17/0625/278100.html