javascript实现的多元素缓冲运动代码实例
本章节分享一段代码实例,它实现了多元素缓冲运动效果。
下面就详细介绍一下它是如何实现的,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0; padding: 0; } li { width: 200px; height: 100px; background: orange; list-style: none; margin: 10px 0; position: relative; left: 200px; } </style> <script type="text/javascript"> window.onload=function(){ var oUl = document.getElementById('ul'); var oLi = oUl.getElementsByTagName('li'); for (var index = 0; index < oLi.length; index++) { oLi[index].timer = null; oLi[index].onmouseover = function () { setMove(this, 100, 'Left'); } oLi[index].onmouseout = function () { setMove(this, 200, 'Left'); } } function setMove(obj, target, dir) { clearInterval(obj.timer); obj.timer = setInterval(function () { var speed = (target - obj['offset' + dir]) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (obj['offset' + dir] == target) { clearInterval(obj.timer); } else { obj.style[dir.toLowerCase()] = obj['offset' + dir] + speed + 'px'; } }, 30) } } </script> </head> <body> <div id="div1"> <ul id="ul"> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
(2).var oUl = document.getElementById('ul'),获取id属性值为ul的元素对象。
(3).var oLi = oUl.getElementsByTagName('li'),获取li元素集合。
(4).for (var index = 0; index < oLi.length; index++){},遍历每一个li元素。
(5).oLi[index].timer = null,为当前索引的li元素添加一个timer属性,并赋值为null。
(6).oLi[index].onmouseover = function () {
setMove(this, 100, 'Left');
},为当前索引的li元素注册onmouseover事件处理函数。
(7).oLi[index].onmouseout = function () {
setMove(this, 200, 'Left');
},为当前索引的li元素注册onmouseout事件处理函数。
(8).function setMove(obj, target, dir) {},此函数实现了缓冲运动效果,obj规定缓冲运动的元素,第二个参数规定运动的目标尺寸,第三个参数规定运动的方向。
(9).clearInterval(obj.timer),停止当前的定时器函数,否则如果多次连续快速鼠标悬浮或者离开,会导致定时器函数的叠加。
(10).obj.timer = setInterval(function () {},30),每隔30毫秒执行一次函数。
(11).var speed = (target - obj['offset' + dir]) / 6,获取此时刻的速度。
(12).speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed),根据速度是否大于0.来执行上舍入或者下舍入。
(13).if (obj['offset' + dir] == target) {
clearInterval(obj.timer);
} else {
obj.style[dir.toLowerCase()] = obj['offset' + dir] + speed + 'px';
},如果达到目标值,那么就停止定时器函数,否则就设置元素的对应的left或者right实现运动。
二.相关阅读:
(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(2).onmouseover事件可以参阅javascript mouseover事件一章节。
(3).onmouseout事件可以参阅javascript mouseout事件一章节。
(4).clearInterval()可以参阅clearInterval() 方法一章节。
(5).setInterval()可以参阅setInterval()一章节。
(6).Math.ceil()可以参阅javascript Math.ceil()一章节。
(7).Math.floor()可以参阅javascript Math.floor()一章节。
(8).offsetLeft可以参阅offsetleft一章节。
javascript实现的多元素缓冲运动代码实例,这样的场景在实际项目中还是用的比较多的,关于javascript实现的多元素缓冲运动代码实例就介绍到这了。
javascript实现的多元素缓冲运动代码实例属于前端实例代码,有关更多实例代码大家可以查看。