知识点

  1. 使用offsetLeft,父标签必须有定位
  2. 标签.children可以获得子标签数组
  3. 鼠标进入：mouseover
  4. 鼠标点击：mousedown
  5. 鼠标离开：mouseout

运行效果

  1. 初始状态
    Javascript特效：天猫导航_初始状态
  2. 在不同栏目运动图标会移动
    Javascript特效：天猫导航_初始状态_02
  3. 点击图标固定
  4. 离开后会返回上一次点击的位置

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;border:0;list-style: none;}
        body{background-color: pink;}

        #nav{
            width: 900px;height: 63px;
            background:url("images/doubleOne.png") no-repeat right
            center #fff;
            border-radius: 5px;position: relative;margin: 100px auto;}
        #nav ul{position: relative;}
        #nav ul li{float: left;width: 88px;height: 63px;text-align: center;line-height: 70px;cursor: pointer;}

        #t_mall{width: 88px;height: 63px;background: url("images/tMall.png") no-repeat;position: absolute;}
    </style>
</head>
<body>
<nav id="nav">
    <span id="t_mall"></span>
    <ul>
        <li>双11狂欢</li>
        <li>服装会场</li>
        <li>数码家电</li>
        <li>家具建材</li>
        <li>母婴童装</li>
        <li>手机会场</li>
        <li>美妆会场</li>
        <li>进口会场</li>
        <li>飞猪旅行</li>
    </ul>
</nav>

<script src="../../MyTools/MyTools.js"></script>
<script>
    window.addEventListener('load', function (ev) {
        // 1. 获取需要的标签
        var nav = myTools.$('nav'), t_mall = nav.children[0], ul = nav.children[1], allLis = ul.children;

        // 记录鼠标点击元素的位置
        var beginX = 0;

        // 2. 遍历操作
        for (var i = 0; i < allLis.length; i++) {
            var li = allLis[i];
            // 2.1 监听鼠标的进入
            li.addEventListener('mouseover', function () {
                 end = this.offsetLeft;
            });

            // 2.2  监听鼠标按下事件
            li.addEventListener('mousedown', function () {
                beginX = this.offsetLeft;
            });

            // 2.3 监听鼠标离开事件
            li.addEventListener('mouseout', function () {
                end = beginX;
            });
        }

        // 3. 缓动动画
        var begin = 0, end = 0;
        setInterval(function () {
            begin += (end - begin) * 0.2;
            t_mall.style.left = begin + 'px';  
        }, 10);
    });
</script>
</body>
</html>