筋斗云导航栏效果（案例）

案例分析

本案例目的实现以下三种效果：

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

因此

① 可以采用动画函数进行制作这个效果

② 先设定筋斗云起始的位置为 0

③ 鼠标经过某个小 li ，就把当前的小 li 的 offsetLeft 位置作为目标值

④ 鼠标离开这个小 li ，就把目标值设为0

⑤ 如果点击了某个小 li ，就把当前的位置存起来，作为筋斗云的起始位置

JS部分的代码：

<script>
window.addEventListener('load', function () {
            // 1. 获取元素
            var cloud = document.querySelector('.cloud');
            var nav = document.querySelector('.nav');
            var lis = document.querySelectorAll('li');
            // 2.鼠标经过和离开 给所有的小 li 绑定事件
            var current = 0;
            for (var i = 0; i < lis.length; i++) {
                // 鼠标经过
                lis[i].addEventListener('mouseenter', function () {
                    animate(cloud, this.offsetLeft);
                });
                // 鼠标离开
                lis[i].addEventListener('mouseleave', function () {
                    animate(cloud, current);
                });
                // 当鼠标点击到某个 li 就以这个 li 的offsetLeft为起始位置
                lis[i].addEventListener('click', function () {
                    current = this.offsetLeft;
                });
            }
        });
</script>

最后的效果如下：

扫描二维码关注公众号，回复： 15623022 查看本文章

★★★ 欢迎批评指正！

筋斗云导航栏效果（案例）

猜你喜欢