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

2023-01-18 19:26:11

要求:

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'
        })

    }
})
  • 作者:一夕ξ
  • 原文链接:https://blog.csdn.net/qq_45387575/article/details/123487522
    更新时间:2023-01-18 19:26:11