js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)的導(dǎo)航條
晚上跟著視頻敲了下 彈性菜單的代碼,先記下來(lái)
效果如下:
代碼如下:
<!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>首頁(yè)</li> <li>論壇</li> <li>視頻</li> <li>課程</li> </ul> </li> <li class="box">首頁(yè)</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;//延遲定時(shí)器,100毫秒人的眼睛是察覺(jué)不出來(lái)的 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>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析
- 原生JS+CSS實(shí)現(xiàn)炫酷重力模擬彈跳系統(tǒng)的登錄頁(yè)面
- JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法
- Javascript實(shí)現(xiàn)重力彈跳拖拽運(yùn)動(dòng)效果示例
- 純js模擬div層彈性運(yùn)動(dòng)的方法
- JS實(shí)現(xiàn)小球的彈性碰撞效果
- JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- js彈性勢(shì)能動(dòng)畫之拋物線運(yùn)動(dòng)實(shí)例詳解
- JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法分析
相關(guān)文章
JS Jquery 遍歷,篩選頁(yè)面元素 自動(dòng)完成(實(shí)現(xiàn)代碼)
本篇文章是對(duì)JS Jquery 遍歷,篩選頁(yè)面元素 自動(dòng)完成的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法,涉及JavaScript數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03如何將HTML字符轉(zhuǎn)換為DOM節(jié)點(diǎn)并動(dòng)態(tài)添加到文檔中詳解
這篇文章主要給大家介紹了關(guān)于如何將HTML字符轉(zhuǎn)換為DOM節(jié)點(diǎn)并動(dòng)態(tài)添加到文檔中的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起看看吧2018-08-08uniapp時(shí)間格式化處理實(shí)現(xiàn)
本文主要介紹了uniapp時(shí)間格式化處理實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08jsonp跨域獲取數(shù)據(jù)的基礎(chǔ)教程
這篇文章主要給大家介紹了關(guān)于jsonp跨域獲取數(shù)據(jù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07微信小程序獲取用戶手機(jī)號(hào)碼的詳細(xì)步驟
最近改了一個(gè)公司項(xiàng)目,新增加了一個(gè)獲取用戶手機(jī)號(hào)功能,里面用到了關(guān)于獲取用戶信息和用戶手機(jī)號(hào)的功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶手機(jī)號(hào)碼的相關(guān)資料,需要的朋友可以參考下2022-07-07JavaScript無(wú)縫滾動(dòng)效果的實(shí)例代碼
本文給大家分享一段實(shí)例代碼有關(guān)js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-03-03悄悄用腳本檢查你訪問(wèn)過(guò)哪些網(wǎng)站的代碼
YouPorn是YouTube的成人自拍版,Alexa排名61。如果你登陸YouPorn主頁(yè),它會(huì)悄悄用腳本檢查你訪問(wèn)過(guò)哪些色情網(wǎng)站。2010-12-12