javascript - 一个简单的js动效？-PHP中文网问答

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <section>
    <p id="id1">1</p>
    <p id="id2">2</p>
    <p id="id3">3</p>
    <p id="id4">4</p>
    <p id="id5">5</p>
    <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);
};

源码

// 把需要用到的变量提前缓存起来 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> <p id="item1"> <p id="id1" class="item">1</p> <p id="id2"class="item">2</p> <p id="id3"class="item">3</p> <p id="id4"class="item">4</p> <p id="id5"class="item">5</p> </p> <p id="line" ></p> </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>

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