一、案例效果

二、案例描述

鼠标经过某个小li，筋斗云跟这到当前小li位置
鼠标离开这个小li，筋斗云复原为原来的位置
鼠标点击了某个小li，筋斗云就会留在点击这个小li 的位

三、案例分析

利用动画函数做动画效果
原先筋斗云的起始位置是0
鼠标经过某个小li，把当前小li 的 offsetLeft 位置做为目标值即可
鼠标离开某个小li，就把目标值设为 0
如果点击了某个小li，就把li当前的位置存储起来，做为筋斗云的起始位置

四、HTML结构

搭建html结构

<body>
    <div class="c_nav">
        <div class="cloud"></div>
        <ul>
            <li class="cloud"><a href="#">掘金首页</a></li>
            <li><a href="#">沸点资讯</a></li>
            <li><a href="#">小册活动</a></li>
            <li><a href="#">文章动态</a></li>
            <li><a href="#">专栏沸点</a></li>
            <li><a href="#">开发大会</a></li>
            <li><a href="#">开发大会</a></li>
            <li><a href="#">开发大会</a></li>
        </ul>
    </div>
</body>

此时页面显示

五、CSS样式

进行css样式设计

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background-color: black;
        }

        .c-nav {
            width: 900px;
            height: 42px;
            background: #fff url(images/rss.png) no-repeat right center;
            margin: 100px auto;
            border-radius: 5px;
            position: relative;
        }

        .c-nav ul {
            position: absolute;
        }

        .c-nav li {
            float: left;
            width: 83px;
            text-align: center;
            line-height: 42px;
        }

        .c-nav li a {
            color: #333;
            text-decoration: none;
            display: inline-block;
            height: 42px;
        }

        .c-nav li a:hover {
            color: #fff;
        }

        .c-nav li.current a {
            color: #0dff1d;
        }

        .cloud {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url(images/cloud.gif) no-repeat;
        }
    </style>

效果如下：

六、JavaScript交互

<script>
        window.addEventListener('load', function () {
            //1.定义一 个缓动动画函数
            function animate(obj, target, callback) {
                //清除以前的定时器
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var step = (target - obj.offsetLeft) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (obj.offsetLeft == target) {
                        clearInterval(obj.timer);
                        callback && callback();
                    }
                    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                    obj.style.left = obj.offsetLeft + step + 'px';
                }, 15)
            }

            //2.获取元素
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c-nav');
            var lis = c_nav.querySelectorAll('li');

            //3.给所有小li绑定事件
            var current = 0;
            for(var i = 0; i < lis.length; i++){
                // (1) 鼠标经过把当前小li 的位置做为目标值
                lis[i].addEventListener('mouseenter', function(){
                    animate(cloud,this.offsetLeft);
                    
                });
                // (2) 鼠标离开就回到起始的位置
                lis[i].addEventListener('mouseleave',function(){
                    animate(cloud,current);
                })
                // (3) 当我们鼠标点击，就把当前位置做为目标值
                lis[i].addEventListener('click',function(){
                    current = this.offsetLeft;
                })
            }
        })
    </script>

Ref:www.bilibili.com/video/BV1Sy…

H5C3JS案例2：筋斗云特效

一、案例效果

二、案例描述

三、案例分析

四、HTML结构

五、CSS样式

六、JavaScript交互