快捷導(dǎo)航

HTML+JavaScript實(shí)現(xiàn)筋斗云導(dǎo)航欄效果

更新時(shí)間：2022年03月15日 08:38:45 作者：一夕ξ

這篇文章主要為大家介紹了如何利用HTML+JavaScript+CSS實(shí)現(xiàn)筋斗云導(dǎo)航欄效果，當(dāng)鼠標(biāo)經(jīng)過某個(gè)li，筋斗云跟著到當(dāng)前的位置，感興趣的小伙伴可以試一試

功能要求：

1、鼠標(biāo)經(jīng)過某個(gè)li，筋斗云跟著到當(dāng)前的位置

2、鼠標(biāo)離開這個(gè)li，筋斗云回到原來的位置

3、鼠標(biāo)點(diǎn)擊了某個(gè)li，筋斗云就留在點(diǎn)擊這個(gè)位置

<!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" >動(dòng)態(tài)</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" >關(guān)注</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() {
    //獲得每個(gè)li，以及img
    var as = document.querySelectorAll('li')
    var img = document.querySelector('img')
        //給每個(gè)li添加點(diǎn)擊事件
 
    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事件要好，防止震動(dòng)
    })
    as[0].addEventListener('mousemove', function() {
        animate(img, 5)
    })
    for (i = 0; i < as.length; i++) {
        //給每個(gè)a添加一個(gè)自定義屬性，倒是用來作為索引號(hào)
        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，鼠標(biāo)點(diǎn)擊某個(gè)li，就固定在這個(gè)li上。離開經(jīng)過某個(gè)li，就到某個(gè)li上，離開這個(gè)li，又回到剛剛的li上，相當(dāng)于對(duì)初始位置的一個(gè)刷新
 
    as[1].addEventListener('click', function() {
        animate(img, 75)
        posi = 75
            //刪除相應(yīng)的離開事件
    })
    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事件要好，防止震動(dòng)
        posi = 300
    })
    as[0].addEventListener('click', function() {
        animate(img, 5)
        posi = 5
    })
})

自己只能做的出這種簡(jiǎn)單的效果，而且還是bug

1、利用動(dòng)畫函數(shù)

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

3、鼠標(biāo)經(jīng)過某個(gè)li，把當(dāng)前小li的offsetLeft作為目標(biāo)值

4、如果點(diǎn)擊了某個(gè)li，就把當(dāng)前l(fā)i的位置存起來，作為圖片的起始位置

思路和自己想的是一樣的，但是要注意位置的取法，是直接通過元素的點(diǎn)擊，去自動(dòng)獲得元素的位置，（但并沒有仔細(xì)考慮圖片應(yīng)該在文字的中心）

其次，加入了ul的絕對(duì)定位，這樣可以消除抖動(dòng)

<!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也加上定位之后，就可以消除抖動(dòng) */
        
        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" >活動(dòng)策劃</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" >企業(yè)文化</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" >公司簡(jiǎn)介</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 //起始位置；別用手算，肯定是獲得某個(gè)元素的位置
    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseenter', function() {
                animate(cloud, this.offsetLeft) //鼠標(biāo)經(jīng)過時(shí)候發(fā)生抖動(dòng)：因?yàn)閳D片過來后，就發(fā)生沖突了，此時(shí)鼠標(biāo)就在圖片上面
            })
            //鼠標(biāo)離開回到起始的位置
        lis[i].addEventListener('mouseleave', function() {
                animate(cloud, current)
            })
            //鼠標(biāo)點(diǎn)擊事件
        lis[i].addEventListener('click', function() {
            // alert(12)
            // animate(cloud, this.offsetLeft) //點(diǎn)擊了鼠標(biāo)之后，圖片的起始位置就發(fā)生改變了
            current = this.offsetLeft
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
 
            }
            this.className = 'current'
        })
 
    }
})

到此這篇關(guān)于HTML+JavaScript實(shí)現(xiàn)筋斗云導(dǎo)航欄效果的文章就介紹到這了,更多相關(guān)JavaScript筋斗云導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: