js實現(xiàn)帶簡單彈性運動的導航條
更新時間：2017年02月22日 16:07:36 作者：zjktttrtrt
本篇文章主要分享了js實現(xiàn)帶簡單彈性運動導航條的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
晚上跟著視頻敲了下 彈性菜單的代碼，先記下來
效果如下：
代碼如下：
<!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)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序引用iconfont圖標的方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
本篇文章主要是對js 動態(tài)加載事件的幾種方法進行了詳細的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
獲取下拉列表框的值是數(shù)組，split，$.inArray示例
獲取下拉列表框的值是數(shù)組，下面用product_id 去匹配是否包含在一個數(shù)組中，感興趣的朋友不要錯過2013-11-11
js實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
JavaScript實現(xiàn)維吉尼亞(Vigenere)密碼算法實例
Vigenere密碼就是一種傳統(tǒng)加密技術(shù)，它是多表代換密碼，能夠有效改進單表代換密碼的詞頻分布特征問題,本文用JavaScript實現(xiàn)維吉尼亞(Vigenere)密碼算法2013-11-11
30分鐘快速入門掌握ES6/ES2015的核心內(nèi)容（下）
這篇文章主要給大家介紹了如何通過30分鐘快速入門掌握ES6/ES2015的核心內(nèi)容的相關(guān)資料，之前給大家介紹過基礎(chǔ)的一些內(nèi)容，下面繼續(xù)來介紹一些其他的新特性，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-04-04
這篇文章主要介紹了javascript批量修改文件編碼格式的方法,分析了使用javascript第三方包批量修改文件編碼的技巧,需要的朋友可以參考下2015-01-01
本文給大家分享的常用腳本有通過數(shù)組，拓展字符串拼接容易導致性能的問題、頁面 視口 滾動條的位置的輔助函數(shù)、調(diào)節(jié)元素透明度的函數(shù)、獲取鼠標位置的幾個通用的函數(shù)、使用cssdisplay屬性來切換元素可見性的一組函數(shù)、樣式相關(guān)的通用函數(shù)、獲取元素當前的高度和寬度。2015-03-03
這篇文章主要為大家詳細介紹了Javascript中async與await的捕捉錯誤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
在javascript你不需要使用new Object()，你該使用{}就可以了。2009-07-07