导航栏效果

来源：互联网发布：多功能圣经软件下载编辑：程序博客网时间：2024/05/16 17:21

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title>导航栏效果</title>

<styletype="text/css">

margin:0;

padding:0;

}

#wrap{

width:500px;

height:30px;

padding-top:10px;

border:1pxsolid gold;

margin:100pxauto;

position:relative;

overflow:hidden;

}

li{

list-style:none;

width:100px;

height:50px;

float:left;

text-align: center;

}

text-decoration:none;

}

#line{

width:100px;

height:3px;

background:red;

position:absolute;

top:30px;

left:0;

}

</style>

</head>

<body>

</div>

<scriptsrc="JS/tween.js" type="text/javascript"></script>

<scripttype="text/javascript">

//获取滑动条

varline = document.getElementById("line");

//获取所有的a标签

varaArray = document.getElementsByTagName("a");

//声明一个变量存储当前移入的标签的下标

varindex = 0;

//声明一个变量储存上一次移入的标签的下标

varprevious = 0;

//声明一个变量存储创建的定时器

vartimer;

//t

vart = 0;

//b

varb = 0;

//c

varend;

var c = end - b;

//d

vard = 10;

//为每一个a链接绑定一个鼠标移入事件

for(vari = 0; i < aArray.length; i++){

aArray[i].onmouseenter= (function(nowIndex){

returnfunction(){

//存储当前的位置

index= nowIndex;

b= previous * 100;

end= index * 100;

c= end - b;

functionmove(){

t++;

line.style.left= Tween.Linear(t, b, c, d) + "px";

if(t== d){

t= 0;

clearInterval(timer);

}

timer=setInterval(move, 20);

//移动过后当前的位置就变成上一次位置

previous= index;

}

})(i);

aArray[i].onmouseleave= function(){

clearInterval(timer);

// setTimeout(clear_timer, 300);

}

//延时器setTimeout()

// function clear_timer(){

// clearInterval(timer)

// }

}

</script>

</body>

</html>

0 0