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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

功能要求：

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 class="lazy" data-src="cloud.js"></script>
    <script class="lazy" data-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 class="lazy" data-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
        }
        
        
        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 class="lazy" data-src="animater.js"></script>
    <script class="lazy" data-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筋斗云导航栏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉