JS小案例-天猫导航栏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
body{
background-color: pink;
}
#nav{
width: 900px;
height: 63px;
background:url("day1_images/doubleOne.png") no-repeat right center #cccccc;
border-radius: 5px;
position: relative;
margin: 100px auto;
}
#nav ul{
position: relative;
}
#nav ul li{
float: left;
width: 88px;
height: 63px;
text-align: center;
line-height: 70px;
cursor: pointer;
}
#t_mall{
width: 88px;
height: 63px;
background:url("day1_images/tMall.png") no-repeat;
position: absolute;
}
</style>
</head>
<body>
<nav id="nav">
<span id="t_mall"></span>
<ul id="uu">
<li>双11狂欢</li>
<li>服装会场</li>
<li>数码家电</li>
<li>家居建材</li>
<li>母婴童装</li>
<li>手机会场</li>
<li>美妆会场</li>
<li>进口会场</li>
<li>飞猪旅行</li>
</ul>
</nav>
<script>
window.onload= function () {
//获取需要的标签
var nav=$("nav");
var t_mall=$("t_mall");
var uu=$("uu");
var allLis=uu.children;
var beginX=0;//记录鼠标点击的位置
//遍历li标签
for(var i=0;i<allLis.length;i++){
var li=allLis[i];
//监听鼠标进入
li.onmouseover= function () {
end=this.offsetLeft;
};
//监听鼠标按下 之后自动停留的位置就是点击的位置
li.onmousedown= function () {
beginX=this.offsetLeft;
};
//监听鼠标离开
li.onmouseout= function () {
end=beginX;
}
}
//实现缓动动画
var begin= 0,end=0;
setInterval(function () {
begin=begin+(end - begin)*0.2;
t_mall.style.left=begin+"px";
},50);
function $(id){
return typeof id==="string"?document.getElementById(id):null;
}
}
</script>
</body>
</html>
