js實現(xiàn)帶簡單彈性運動的導(dǎo)航條
更新時間:2017年02月22日 16:07:36 作者:zjktttrtrt
本篇文章主要分享了js實現(xiàn)帶簡單彈性運動導(dǎo)航條的示例代碼,具有很好的參考價值,下面跟著小編一起來看下吧
晚上跟著視頻敲了下 彈性菜單的代碼,先記下來
效果如下:
代碼如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .ul1{ width:450px; height:30px; margin:20px auto; position:relative; } li{ list-style:none; line-height:30px; height:30px; width:100px; color:orange; text-align:center; float:left; margin-right:5px; border:1px soli #000; background-color:red; } .mark{ position:absolute; left:0; top:0; overflow:hidden; } .mark ul{ width:450px; position:absolute; left:0; top:0; } .mark ul li{ color:#fff; background-color:deepskyblue; } </style> </head> <body> <ul class="ul1"> <li class="mark"> <ul> <li>首頁</li> <li>論壇</li> <li>視頻</li> <li>課程</li> </ul> </li> <li class="box">首頁</li> <li class="box">論壇</li> <li class="box">視頻</li> <li class="box">課程</li> </ul> </body> <script> window.onload = function(){ var oMark = document.querySelector('.mark'); var oBox = document.querySelectorAll('.box'); var childUl = oMark.querySelector('ul'); var timer = null; var timer2 = null;//延遲定時器,100毫秒人的眼睛是察覺不出來的 var iSpeed = 0; for (var i=0;i<oBox.length;i++){ oBox[i].onmouseover = function(){ clearTimeout(timer2); startMove(this.offsetLeft); }; oBox[i].onmouseout = function(){ timer2 = setTimeout(function(){ startMove(0); },100); }; } oMark.onmouseover = function(){ clearTimeout(timer2); }; oMark.onmouseout= function(){ timer2 = setTimeout(function(){ startMove(0); },100); }; function startMove(iTarget){ clearInterval(timer); timer = setInterval(function(){ iSpeed += (iTarget -oMark.offsetLeft)/5; iSpeed *= 0.75; if(Math.abs(iSpeed)<=1 && Math.abs(iTarget -oMark.offsetLeft)<=1){ clearInterval(timer); oMark.style.left = iTarget + 'px'; childUl.style.left = -iTarget + 'px'; iSpeed = 0; }else { oMark.style.left = oMark.offsetLeft + iSpeed +'px'; childUl.style.left = -oMark.offsetLeft +'px'; } },30); }; }; </script> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
JS Jquery 遍歷,篩選頁面元素 自動完成(實現(xiàn)代碼)
本篇文章是對JS Jquery 遍歷,篩選頁面元素 自動完成的實現(xiàn)代碼進行了詳細的分析介紹,需要的朋友參考下2013-07-07js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實現(xiàn)方法,涉及JavaScript數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03如何將HTML字符轉(zhuǎn)換為DOM節(jié)點并動態(tài)添加到文檔中詳解
這篇文章主要給大家介紹了關(guān)于如何將HTML字符轉(zhuǎn)換為DOM節(jié)點并動態(tài)添加到文檔中的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起看看吧2018-08-08jsonp跨域獲取數(shù)據(jù)的基礎(chǔ)教程
這篇文章主要給大家介紹了關(guān)于jsonp跨域獲取數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07