版权声明：版权所有，如需引用，请注明出处！ https://blog.csdn.net/DHRMM999/article/details/82623635
导航栏实现筋斗云效果
css代码
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
.box{
width: 800px;
height: 42px;
background: url(../images/wifi.png) right center no-repeat;
margin: 200px auto;
border-radius: 8px;
position: relative;
}
.box ul{
width: 800px;
height: 42px;
position: relative;
}
.box ul li{
width: 83px;
height: 42px;
text-align: center;
font: 500 16px/42px simhei;
float: left;
cursor: pointer;
}
.box span{
position: absolute;
left: 0;
right: 0;
width: 83px;
height: 42px;
background: url(../images/cloud.gif) no-repeat;
}
</style>html代码
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>活动策划</li>
<li>师资力量</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
</body>js代码
<script type="text/javascript">
var box = document.getElementsByClassName("box");
var li = document.getElementsByTagName("li");
var liwidth = li[0].offsetWidth;
var span = document.getElementsByTagName("span")[0];
console.log(span)
//计数器
var count=0;
for(var i=0;i<li.length;i++){
li[i].index = i;//获取索引值
li[i].onmouseover = function(){
//让span移动到鼠标指向的地方
animate(span,this.index*liwidth);
}
//鼠标移开
li[i].onmouseout = function(){
//让鼠标回到原来li的位置
animate(span,count*liwidth);
}
//鼠标点击
li[i].onclick = function(){
count=this.index;
animate(span,count*liwidth);
}
}
//封装动画
function animate(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target-obj.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
var result = target-obj.offsetLeft;
obj.style.left = obj.offsetLeft+speed+"px";
if(Math.abs(result)<=Math.abs(speed)){
clearInterval(obj.timer);
obj.style.left = target+"px";
}
},18);
}
</script>