导航栏筋斗云的制作

最新推荐文章于 2023-02-02 20:52:16 发布

安和橋北

最新推荐文章于 2023-02-02 20:52:16 发布

阅读量740

点赞数

分类专栏：前端学习记录文章标签： css3 javascript html

本文链接：https://blog.csdn.net/Laok0413/article/details/123028412

版权

前端学习记录专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果实现要求：

筋斗云随着鼠标在哪里停留就飞到哪
如果没有点击，那么鼠标离开的时候筋斗云飞回原来的位置
如果点击了，筋斗云就留在当前位置，并且当前栏目字体可以变色

分析：

其实就是很简单的animate动画应用，只需要进入animate.js，直接调用函数即可。

但是需要注意的是，如何实现点击之后筋斗云停留在当前位置，如果不点击飞回原来位置？

这就需要一个变量current来保存当前位置。

最开始var current = 0;

当点击之后，current = this.offsetleft
当鼠标离开之后，animate(cloud,current)，让筋斗云飞回到当前位置
当鼠标悬浮时，animate(cloud,this.offsetleft)，让筋斗云来到当前鼠标的位置

所以就是分了三种情况，这里还没有用到animate的回调函数

回调函数是个好东西

事实上，点击之后，字体变颜色变大之类的效果，都可以用回调函数来做，还是很方便的。

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .nav {
            position: relative;
            background-color: #ccc;
            width: 900px;
            height: 42px;
            margin: 100px auto;
        }
        
        ul {
            position: absolute;
            z-index: 2;
        }
        
        .nav ul li {
            float: left;
            text-align: center;
            line-height: 42px;
            width: 83px;
        }
        
        .nav ul li a {
            text-decoration: none;
            color: black;
        }
        
        .nav ul li a:hover {
            color: white;
        }
        
        .cloud {
            position: absolute;
            top: 0;
            left: 0;
            width: 83px;
            height: 42px;
            background-image: url(../images/cloud.gif);
        }
    </style>
</head>

<body>
    <div class="nav">
        <span class="cloud"></span>
        <ul>
            <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>
            <li><a href="#">啥是佩奇</a></li>
        </ul>
    </div>

    <script>
        var nav = document.querySelector('.nav');
        var lis = nav.querySelectorAll('li');
        var cloud = nav.querySelector('.cloud');
        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);
            })
            lis[i].addEventListener('click', function() {
                current = this.offsetLeft;
                for (var i = 0; i < lis.length; i++) {
                    lis[i].children[0].style.color = '';
                }
                this.children[0].style.color = 'red';
            })
        }
    </script>
</body>

安和橋北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航栏筋斗云的制作

效果实现要求：筋斗云随着鼠标在哪里停留就飞到哪如果没有点击，那么鼠标离开的时候筋斗云飞回原来的位置如果点击了，筋斗云就留在当前位置，并且当前栏目字体可以变色分析：其实就是很简单的animate动画应用，只需要进入animate.js，直接调用函数即可。但是需要注意的是，如何实现点击之后筋斗云停留在当前位置，如果不点击飞回原来位置？这就需要一个变量current来保存当前位置。最开始var current = 0;当点击之后，current = this.offsetlef
复制链接

扫一扫