HTML+JS+CSS筋斗云导航栏效果

最新推荐文章于 2022-09-23 15:06:30 发布

一夕ξ

最新推荐文章于 2022-09-23 15:06:30 发布

阅读量2.7k

点赞数 2

分类专栏：前端学习文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_45387575/article/details/123487522

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

要求：

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:;">首页</a>
            </li>
            <li><a href="javascript:;">文章</a></li>
            <li><a href="javascript:;">动态</a></li>
            <li><a href="javascript:;">关注</a></li>
            <li><a href="javascript:;">最新热门</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:;">首页新闻</a></li>
            <li><a href="javascript:;">师资力量</a></li>
            <li><a href="javascript:;">活动策划</a></li>
            <li><a href="javascript:;">企业文化</a></li>
            <li><a href="javascript:;">招聘信息</a></li>
            <li><a href="javascript:;">公司简介</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'
        })

    }
})

一夕ξ

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML+JS+CSS筋斗云导航栏效果

要求：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 nam.
复制链接

扫一扫