js实现浮动框【缓冲效果】
2014-06-30 20:56
190 查看
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>右侧缓动悬浮宽</title> <style type="text/css"> #f_fix{width: 100px;height: 150px;background: #808080;position: absolute;right: 0;} </style> </head> <body style="height:2000px;"> <div id="f_fix"></div> <script type="text/javascript"> window.onscroll=function() { var oDiv=document.getElementById('f_fix'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; startMove(document.documentElement.clientHeight-oDiv.offsetHeight*1.5+scrollTop); }; var timer=null; function startMove(iTarget) { clearInterval(timer); timer=setInterval( function(){ var oDiv=document.getElementById('f_fix'); var speed=(iTarget-oDiv.offsetTop)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (oDiv.offsetTop==iTarget) { clearInterval(timer); }else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } },30); } </script> </body> </html>
相关文章推荐
- 用js实现缓冲运动效果
- JS实现带缓冲效果打开、关闭、移动一个层的方法
- js实现的简单图片浮动效果完整实例
- JS实现侧边栏鼠标经过弹出框+缓冲效果
- JS多物体实现缓冲运动效果示例
- 鼠标浮动过按钮实现立体按钮的效果哦,不需要用JS~~~纯CSS
- JS实现兼容性好,带缓冲的动感网页右键菜单效果
- JS实现简单易用的手机端浮动窗口显示效果
- js 右侧浮动层效果实现代码(跟随滚动)
- 原生js实现返回顶部缓冲效果
- js实现缓冲运动效果的方法
- JS实现兼容性好,带缓冲的动感网页右键菜单效果
- js实现随屏幕滚动的带缓冲效果的右下角广告代码
- JS实现简单易用的手机端浮动窗口显示效果
- js 实现一个图片浮动的效果
- JS实现带缓冲效果打开、关闭、移动一个层的方法
- js实现带缓冲效果的仿QQ面板折叠菜单代码
- JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
- JS实现物体带缓冲的间歇运动效果示例
- JS简单实现浮动窗口效果示例