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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 一个简单的js动效？

黄舟 2017-04-11 09:47:28

[JavaScript讨论组]

521

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




  
  
  JS Bin


  
    1
    2
    3
    4
    5
    
  



//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);
};

源码

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(4)

天蓬老师2017-04-11 09:49:28 4楼

按你的思路：

// 把需要用到的变量提前缓存起来
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';
    }
})

赞 +0

添加回复

阿神2017-04-11 09:49:28 3楼

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

 <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>

赞 +0

添加回复

ringa_lee2017-04-11 09:49:28 2楼

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);
    });
  }
})();

赞 +0

添加回复