phpstudy集成环境

 首页 > 一个简单的js动效？

一个简单的js动效？

如图，想实现一个很简单的效果，鼠标点击某一块的时候，左边的黄线就会移动到该块的左边。黄线是绝对定位的块，通过修改top的值进行移动，本人技术菜，能想到最简洁的代码就是这么写了，而且这种写法估计也就只能用在静态页面，我想知道更简洁更具有扩展性的代码应该怎么写？获取鼠标位置之类的……
谢谢~~

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <section>
    <div id="id1">1</div>
    <div id="id2">2</div>
    <div id="id3">3</div>
    <div id="id4">4</div>
    <div id="id5">5</div>
    <i id="line" style="top: 90px;"></i>
  </section>
</body>
</html>

//js
function avtiveLineTop(n) {
  document.getElementById('line').style.top = n + 'px';
};

document.getElementById('id1').onclick = function() {
  avtiveLineTop(0);
};
document.getElementById('id2').onclick = function() {
  avtiveLineTop(51);
};
document.getElementById('id3').onclick = function() {
  avtiveLineTop(102);
};
document.getElementById('id4').onclick = function() {
  avtiveLineTop(153);
};
document.getElementById('id5').onclick = function() {
  avtiveLineTop(204);
};

源码

function avtiveLineTop(n) {
  document.getElementById('line').style.top = n + 'px';
}
(function(){
  var height = 51;
  var navs = document.querySelectorAll("section div");
  for(var i = 0, len = navs.length; i < len; i++) {
    navs[i].addEventListener("click", function() {
      var node = [].indexOf.call(navs, this); //黑魔法
      avtiveLineTop(node * height);
    });
  }
})();

按你的思路：

// 把需要用到的变量提前缓存起来
var section = document.querySelector('section'),
    line = document.getElementById('line'),
    height = 51;
// 事件委托，监听父元素的点击事件
section.addEventListener('click', function(e) {
    // target 是点击事件发生的实际元素
    var target = e.target,
        idIndex = target.id.indexOf('id');
    // 判断点击元素的id是否含有字符'id'
    if (idIndex === 0) {
        // 获取'id'里对应的数字，转换成Number 格式
        var n = parseInt(target.id.slice(2), 10);
        line.style.top = n * height + 'px';
    }
})

这个可以使用到事件代理，我是这样实现的，希望对你有你帮助

 <section>
   <div id="item1">
    <div id="id1" class="item">1</div>
    <div id="id2"class="item">2</div>
    <div id="id3"class="item">3</div>
    <div id="id4"class="item">4</div>
    <div id="id5"class="item">5</div>
    </div>
    <div id="line" ></div>
  </section>


<script>
    function avtiveLineTop(n) {
  document.getElementById('line').style.top = n + 'px';
};
      var item1=document.getElementById("item1");
          item1.addEventListener("click",handle,false);
         function handle(event){
              var event=event||window.event;
                var target=event.target||event.srcElement;;
                switch(target.id){
                    case "id1":
                       avtiveLineTop(0);   
                   break;
                   case "id2":
                        avtiveLineTop(51);
                   break;
                    case "id3":
                       avtiveLineTop(102);
                   break;
                     case "id4":
                     avtiveLineTop(153);
                   break;
                   case "id5":
                       avtiveLineTop(204);
                   break;


                       
                }
                   }
    
      </script>

将方块高度写在js内会造成js和样式严重耦合，应该是点击时设置#line的top值为被点击块的offsetTop。以下是我放在codepen上的demo http://codepen.io/Doing93/pen/RaBLLg

【热门文章】
【热门文章】