js彈性運動滑動的菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈性運動效果下滑的菜單</title>
<script>
window.onload = function(){
var oUl = document.getElementById(‘oul‘);
var oLi = oul.getElementsByTagName(‘li‘);
var oLine = document.getElementById(‘#underline‘);
var oLine= oLi[oLi.length-1]
for(var i = 0; i < oLi.length-1; i++){
oLi[i].onmouseover = function(){
move(oLine,this.offsetLeft);
console.log(this.offsetLeft)
}
}
}
//封裝好的函數：
var speed = 0;
var left = 0;
function move(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
speed += (target - obj.offsetLeft)/5;
speed *= 0.7;
left += speed;
obj.style.left = left + "px";
if(Math.abs(speed)<1&&Math.abs(target-left)<1){
obj.style.left = target + "px";
clearInterval(obj.timer);
}
document.title = obj.style.left + ‘|‘ + target;
}, 30)
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
float: left;
width: 100px;
height: 30px;
border: 1px solid #ccc;
position: relative;
text-align: center;
line-height: 30px;
z-index: 2;
cursor: pointer;
}
#underline{
width: 101px;
height: 5px;
background-color: red;
position: absolute;
overflow: hidden;
border: none;
top: 26px;
left: 0;
z-index: 1;
}
ul{
width: 508px;
height: 30px;
position: relative;
margin: 100px auto 0;
}
</style>
</head>
<body>
<ul id="oul">
<li>首頁</li>
<li>關於我們</li>
<li>產品</li>
<li>聯系方式</li>
<li id="underline"></li>
</ul>
</body>
</html>
js彈性運動滑動的菜單