HTML+JavaScript实现筋斗云导航栏效果

更新时间：2022年03月15日 08:38:45 作者：一夕ξ

这篇文章主要为大家介绍了如何利用HTML+JavaScript+CSS实现筋斗云导航栏效果，当鼠标经过某个li，筋斗云跟着到当前的位置，感兴趣的小伙伴可以试一试

功能要求：

1、鼠标经过某个li，筋斗云跟着到当前的位置

2、鼠标离开这个li，筋斗云回到原来的位置

3、鼠标点击了某个li，筋斗云就留在点击这个位置

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 500px;
            height: 50px;
            background-color: grey;
        }
        
        ul li {
            list-style: none;
            float: left;
            text-align: center;
            height: 40px;
            line-height: 40px;
            margin-left: 0px;
            width: 70px;
            padding-left: 0px
        }
        /* 问题一：之前好像有案例解决，文字与文字宽度一致 */
        
        ul {
            margin: 0px;
            height: 50px;
            line-height: 50px;
            padding-top: 7px;
            padding-left: 20px;
        }
        
        a {
            display: inline-block;
            width: 100%;
            padding-left: 0px;
            text-align: left;
            color: black;
            text-decoration: none;
        }
        
        img {
            position: absolute;
            top: -5px;
            left: 5px;
            width: 60px;
            height: 60px;
            opacity: 0.5;
        }
    </style>
    <script src="cloud.js"></script>
    <script src="animater.js"></script>
</head>
 
<body>
    <div class="box">
        <ul>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首页</a>
            </li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >文章</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >动态</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >关注</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >最新热门</a></li>
        </ul>
        <img src="祥云.png" alt="">
    </div>
</body>
 
</html>

window.addEventListener('load', function() {
    //获得每个li，以及img
    var as = document.querySelectorAll('li')
    var img = document.querySelector('img')
        //给每个li添加点击事件
 
    as[1].addEventListener('mousemove', function() {
        animate(img, 75)
    })
    as[2].addEventListener('mousemove', function() {
        animate(img, 145)
    })
    as[3].addEventListener('mousemove', function() {
        animate(img, 215)
    })
    as[4].addEventListener('mousemove', function() {
        animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动
    })
    as[0].addEventListener('mousemove', function() {
        animate(img, 5)
    })
    for (i = 0; i < as.length; i++) {
        //给每个a添加一个自定义属性，倒是用来作为索引号
        as[i].setAttribute('index', i)
 
    }
    var posi = 0
    console.log(as[0].getAttribute('index'))
    for (i = 0; i < as.length; i++) {
        as[as[i].getAttribute("index")].addEventListener('mouseout', fn)
 
        function fn() {
            animate(img, posi)
        }
    }
    //3，鼠标点击某个li，就固定在这个li上。离开经过某个li，就到某个li上，离开这个li，又回到刚刚的li上，相当于对初始位置的一个刷新
 
    as[1].addEventListener('click', function() {
        animate(img, 75)
        posi = 75
            //删除相应的离开事件
    })
    as[2].addEventListener('click', function() {
        animate(img, 145)
        posi = 145
    })
    as[3].addEventListener('click', function() {
        animate(img, 215)
        posi = 215
    })
    as[4].addEventListener('click', function() {
        animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动
        posi = 300
    })
    as[0].addEventListener('click', function() {
        animate(img, 5)
        posi = 5
    })
})

自己只能做的出这种简单的效果，而且还是bug

1、利用动画函数

2、原先图片的起始位置是0

3、鼠标经过某个li，把当前小li的offsetLeft作为目标值

4、如果点击了某个li，就把当前li的位置存起来，作为图片的起始位置

思路和自己想的是一样的，但是要注意位置的取法，是直接通过元素的点击，去自动获得元素的位置，（但并没有仔细考虑图片应该在文字的中心）

其次，加入了ul的绝对定位，这样可以消除抖动

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c-nav {
            width: 600px;
            height: 40px;
            background-color: grey;
            position: relative;
        }
        
        ul {
            position: absolute;
            text-align: center;
            margin-left: 0px;
            padding-left: 0px
        }
        /* 给ul也加上定位之后，就可以消除抖动 */
        
        li {
            top: 0px;
            list-style: none;
            float: left;
            padding-left: 10px;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 10px;
        }
        
        a {
            color: black;
            text-decoration: none;
        }
        
        .cloud {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 70px;
            height: 35px;
            background-image: url(祥云.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            opacity: 0.6;
        }
        
        .current a {
            color: red
        }
    </style>
    <script src="animater.js"></script>
    <script src="cloud.js"></script>
</head>
 
<body>
    <div class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li class="current"><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首页新闻</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >师资力量</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >活动策划</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >企业文化</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >招聘信息</a></li>
            <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >公司简介</a></li>
        </ul>
    </div>
</body>
 
</html>

window.addEventListener('load', function() {
    var c_nav = document.querySelector('.c-nav')
    var cloud = document.querySelector('.cloud')
    var lis = document.querySelectorAll('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)
            })
            //鼠标点击事件
        lis[i].addEventListener('click', function() {
            // alert(12)
            // animate(cloud, this.offsetLeft) //点击了鼠标之后，图片的起始位置就发生改变了
            current = this.offsetLeft
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
 
            }
            this.className = 'current'
        })
 
    }
})

到此这篇关于HTML+JavaScript实现筋斗云导航栏效果的文章就介绍到这了,更多相关JavaScript筋斗云导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

关于js datetime的那点事
关于js datetime的一些使用经验分享，想要了解datetime日期操作的朋友可以参考下。
2011-11-11
uniapp小程序上传图片功能的实现
本篇文章我们研究一下，在移动端开发过程中经常使用到的图片上传功能，在大多数小程序或者APP中都会遇到一些实名认证或者头像上传的功能，对uniapp小程序上传图片功能感兴趣的朋友跟随小编一起看看吧
2023-01-01
JavaScript基础——使用Canvas绘图
这篇文章主要介绍了JavaScript基础——使用Canvas绘图，Canvas也真的跟现实生活中的画布非常相似，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2016-11-11
执行iframe中的javascript方法
如何调用执行iframe中的方法？如下
2008-10-10
layui实现数据表格table分页功能(ajax异步)
这篇文章主要为大家详细介绍了layui实现数据表格table分页功能、异步加载，表格渲染，含条件查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
JavaScript中判断对象是否为空的方法小结
在JavaScript中,判断一个对象是否为空可以有多种方法,这篇文章主要为大家详细介绍了几种常见的方法,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
微信小程序实现之手势锁功能实例代码
这篇文章主要介绍了微信小程序实现之手势锁功能的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
js parseInt的陷阱分析小结
js parseInt的陷阱分析小结,当第一个字符为0时，Js会把它看成一个8进制数字，其他8进制之外的字符都回被忽略掉。
2011-03-03
JS实现网页导航条特效
这篇文章主要为大家详细介绍了JS实现网页导航条特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
javascript数组去重方法汇总
数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下。
2015-04-04

HTML+JavaScript实现筋斗云导航栏效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具