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实现的多元素缓冲运动代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容