js如何實(shí)現(xiàn)導(dǎo)航跟隨效果

這篇文章主要介紹js如何實(shí)現(xiàn)導(dǎo)航跟隨效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁更加美觀。

具體內(nèi)容如下

如何實(shí)現(xiàn)上面的效果，請(qǐng)看下面的步驟

第一步：用 css 調(diào)整樣式 ，這里小編用的是彈性盒子實(shí)現(xiàn)導(dǎo)航的平均分配。（聰明的你可以嘗試用其他的方式看看能不能實(shí)現(xiàn)）css代碼如下：

<style type="text/css">
 *{padding:0;margin:0;}
 a{text-decoration:none;}
 html,body{height:100%;width:100%;background:black;}
 ul{position:relative;width:990px;list-style:none;background:white;display: flex;flex-direction:row;justify-content: space-around;margin:50px auto;border-radius:10px;}
 ul li{position: relative;flex:1;text-align:center;}
 ul li a{font-size:18px;color:#333;padding:10px 0;display: block;}
 .cloud{position:absolute;left:32px;top:0;bottom:0;margin:auto;width:83px;height:42px;background:url('images/cloud.gif');}
 </style>

html代碼如下：這里 a 標(biāo)簽中的 href 屬性后面加上那句代碼是為了在實(shí)現(xiàn)點(diǎn)擊事件時(shí)不讓他有其他事件發(fā)生

<ul>
 <span class="cloud"></span>
 <li> <a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁 </a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >電視劇</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最新電影</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞?lì)^條</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >八卦娛樂</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >軍事熱點(diǎn)</a></li>
 </ul>

第二步：分析下如何獲得   圖片（cloud.gif）   距離最左邊的  left  值

 第三步：實(shí)現(xiàn)鼠標(biāo)移動(dòng)，移除，和點(diǎn)擊事件的效果

 <script type="text/javascript">
 //獲得類為cloud的標(biāo)簽，
 var pic=document.getElementsByClassName('cloud')[0];
 //獲得所有的 li 標(biāo)簽
 var liList=document.getElementsByTagName('li');
 //定義向右的移動(dòng)初始距離
 var liLeft=32;
 //定義緩慢動(dòng)畫的初始值
 var header=32;
 //用于定義當(dāng)鼠標(biāo)點(diǎn)擊時(shí)的初始位置
 var currentLeft=32;
 for(var i=0;i<liList.length;i++){
  //鼠標(biāo)放上事件
  liList[i].onmouseover=function(){
  //獲取目標(biāo)距離
  liLeft = this.offsetLeft+this.offsetWidth/2-pic.offsetWidth/2;
  }
  //鼠標(biāo)移除事件
  liList[i].onmouseout=function(){
  //當(dāng)鼠標(biāo)移除某個(gè)li的時(shí)候把目標(biāo)距離改為初始狀態(tài)
  liLeft=currentLeft;
  }
  //鼠標(biāo)點(diǎn)擊事件
  liList[i].onclick=function(){
  currentLeft=this.offsetLeft+this.offsetWidth/2-pic.offsetWidth/2;
  }
 
 }
 //定義緩慢動(dòng)畫
 setInterval(function(){
  header = header + (liLeft-header)/10;
  pic.style.left = header + 'px';
 },20);
 </script>

以上是“js如何實(shí)現(xiàn)導(dǎo)航跟隨效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！