JS实现侧悬浮浮动实例代码
2013-11-29 00:00
856 查看
效果:
思路:
首先,加载onscroll控制滚动条。然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点。最后将其参数返回。再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数。
代码:
思路:
首先,加载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); } </script> </head> <body style="height: 1000px;"> <div id="div1"> </div> </body>
相关文章推荐
- JS实现侧悬浮浮动实例代码
- JS实现动态增加和删除li标签行的实例代码
- JS小功能(onmouseover实现选择月份)实例代码
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- 基于js实现投票的实例代码
- JS简单实现文件上传实例代码(无需插件)
- JS实现多物体缓冲运动实例代码
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- 使用 Node.js 实现图片的动态裁切及算法实例代码详解
- 基于Angular.js实现的触摸滑动动画实例代码
- 原生JS实现的放大镜效果实例代码
- 基于js实现投票的实例代码
- JS小功能(setInterval实现图片效果显示时间)实例代码
- JS实现切换标签页效果实例代码
- js实现各浏览器全屏代码实例
- vue.js实现条件渲染的实例代码
- 基于 Immutable.js 实现撤销重做功能的实例代码
- JS实现简易的图片拖拽排序实例代码
- 如何通过js实现图片预览功能【附实例代码】