JavaScript缓冲运动之防抖动
来源:互联网 发布:windows 车载 编辑:程序博客网 时间:2024/06/11 04:19
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>GuoYu-ajax</title> <style type="text/css"> #div1 { width: 100px; height: 200px; background: red; position: absolute; } </style></head><body style="height: 500000px;"> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); window.onscroll = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'; //上面是硬着陆,很生硬,下面封装了一个函数,缓冲着陆 startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop)); } var timer = null; function startMove(iTarget) { console.log('oDiv.offsetTop = ' + oDiv.offsetTop); clearInterval(timer); timer = setInterval(function() { var speed = (iTarget - oDiv.offsetTop) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (oDiv.offsetTop == iTarget) { clearInterval(timer); } else { document.title = iTarget + ',' + oDiv.offsetTop; //奇怪,红色div不停的抖动,iTarget为774.5,offsetTop不停的变为774和775,不停抖动 //到最后问题就演变为speed的问题了, /* var speed = (774.5 - 774)/6;speed => 1, 774 -> 775;但是过了774.5, 此时speed => -1,775 -> 774,速度一直取整的,始终到不了774.5的。 总结就是:最后僵持阶段,速度只能取整,而目的地不是整数,跨一步大了,退回来狠了。 最后的平息阶段就是当前值和目标值相等了。 速度 = (目标值 - 当前值)/ 缩放系数 */ oDiv.style.top = oDiv.offsetTop + speed + 'px'; } }, 30); } </script></body></html>
0 0
- JavaScript缓冲运动之防抖动
- JavaScript运动之缓冲运动
- JavaScript 动画之缓冲运动
- JavaScript动画篇之缓冲运动
- JavaScript运动框架(二):解决防抖动问题、悬浮对联
- JaveScript 运动之缓冲运动
- JavaScript 高级课程之缓冲/多个DIV运动框架
- javascript运动框架---2--缓冲运动
- 40、JavaScript的运动----缓冲运动
- JavaScript动画2-缓冲运动
- (39)JS运动之缓冲运动
- 字符设备驱动之防抖动
- 按键驱动的恩恩怨怨之防抖动
- 字符设备驱动程序之定时器防抖动
- linux驱动程序之定时器防按键抖动
- JavaScript 高级课程之缓冲+多个DIV运动框架实现 + 透明度
- 缓冲运动
- 缓冲运动
- Hadoop之NameNode和SecondaryNameNode的区别
- BGP组网 始发端与接收端都各自有路由,但数据包双方收到对方数据(PING不通)
- 异步页面刷新pagination.js
- 命令行工具解析Crash文件,dSYM文件进行符号化
- 过拟合
- JavaScript缓冲运动之防抖动
- python线程event
- C#控制台与窗体应用程序
- pandas join merge
- Routes
- 求gbk字符个数
- Winform折叠菜单实现
- Linux 八 软件管理:RPM、YUM
- 解决jquery实现的radio再次选中的问题