HTML+JavaScript實現(xiàn)筋斗云導航欄效果
更新時間：2022年03月15日 08:38:45 作者：一夕ξ
這篇文章主要為大家介紹了如何利用HTML+JavaScript+CSS實現(xiàn)筋斗云導航欄效果，當鼠標經(jīng)過某個li，筋斗云跟著到當前的位置，感興趣的小伙伴可以試一試
功能要求：
1、鼠標經(jīng)過某個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" >動態(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() {
//獲得每個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上。離開經(jīng)過某個li，就到某個li上，離開這個li，又回到剛剛的li上，相當于對初始位置的一個刷新
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事件要好，防止震動
posi = 300
})
as[0].addEventListener('click', function() {
animate(img, 5)
posi = 5
})
})自己只能做的出這種簡單的效果，而且還是bug
1、利用動畫函數(shù)
2、原先圖片的起始位置是0
3、鼠標經(jīng)過某個li，把當前小li的offsetLeft作為目標值
4、如果點擊了某個li，就把當前l(fā)i的位置存起來，作為圖片的起始位置
思路和自己想的是一樣的，但是要注意位置的取法，是直接通過元素的點擊，去自動獲得元素的位置，（但并沒有仔細考慮圖片應(yīng)該在文字的中心）
其次，加入了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" >企業(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" >公司簡介</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) //鼠標經(jīng)過時候發(fā)生抖動：因為圖片過來后，就發(fā)生沖突了，此時鼠標就在圖片上面
})
//鼠標離開回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current)
})
//鼠標點擊事件
lis[i].addEventListener('click', function() {
// alert(12)
// animate(cloud, this.offsetLeft) //點擊了鼠標之后，圖片的起始位置就發(fā)生改變了
current = this.offsetLeft
for (var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
this.className = 'current'
})
}
})到此這篇關(guān)于HTML+JavaScript實現(xiàn)筋斗云導航欄效果的文章就介紹到這了,更多相關(guān)JavaScript筋斗云導航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)導航功能的操作步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
前端技巧之HTTP中POST提交數(shù)據(jù)四種方式
這篇文章主要為大家介紹了前端技巧之HTTP中POST提交數(shù)據(jù)四種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Bootstrap頁面標題Page Header的實現(xiàn)方法
這篇文章主要為大家詳細介紹了Bootstrap頁面標題Page Header的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
點擊按鈕或鏈接時不跳轉(zhuǎn)只刷新頁面，在某些情況下還是比較實用的，下面整理些不錯的示例，感興趣的朋友可以參考下2013-10-10
用javascript實現(xiàn)div可編輯的常見方法
用javascript實現(xiàn)div可編輯的常見方法...2007-10-10
js對象與一般的面向?qū)ο蟮某绦蛟O(shè)計語言有所不同的。js中的對象是基本原型的。下面給大家介紹js中對象的不同創(chuàng)建方法，非常不錯，感興趣的朋友一起學習吧2016-08-08
JavaScript中“過于”犀利地for/in循環(huán)使用示例
Java中的增強for循環(huán)很是好用，但是JavaScript中為我們提供的for/in循環(huán)已然不是這么簡單了，下面有個簡單的示例，大家不妨參考下2013-10-10
Javascript計算兩個marker之間的距離(Google Map V3)
做地圖開發(fā)，最常用到的就是marker一些操作和交互。簡單介紹一下，兩個marker之間的距離計算，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
Fundebug支持監(jiān)控微信小程序HTTP請求錯誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請求錯誤的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
javascript add event remove event
javascript事件綁定和刪除功能代碼2008-04-04