您的位置：首页 > Web前端 > JavaScript

使用缓动动画函数实现导航栏效果

2017-02-22 16:02 567 查看

需求：

1.鼠标在那个li上面，span对应移动到该li上，移开后，回到原位置

2.鼠标点击那个li就记录该li标签，移开的时候span回到该记录的li标签上

要点：

1.封装匀速函数

2.计数器思想

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin:0;
}
body {
background-color: rgba(0,0,0,0.8);
}
div {
width: 800px;
height: 42px;
background: #fff;
margin:200px auto;
position: relative;
}
ul {
list-style: none;
position: relative;
}
li{
width: 83px;
height: 42px;
font:500 16px/42px "simsun";
float: left;
text-align: center;
cursor: pointer;
}
span {
left:0;
top:0;
width: 83px;
height: 42px;
position: absolute;
border-bottom: 3px solid red;
}
</style>
</head>
<body>
<div>
<span></span>
<ul>
<li>测试文字1</li>
<li>测试文字2</li>
<li>测试文字3</li>
<li>测试文字4</li>
<li>测试文字5</li>
<li>测试文字6</li>
<li>测试文字7</li>
</ul>
</div>
</body>
<script>
var span = document.getElementsByTagName("span")[0];
var liArr = document.getElementsByTagName("li");
var liWidth = liArr[0].offsetWidth;
var count = 0 ;
for(var i=0;i<liArr.length;i++){
liArr[i].index = i ;
liArr[i].onmouseover = function(){
animate(span,this.index * liWidth);
console.log(1);
};
liArr[i].onmouseout = function(){
animate(span,count * liWidth);
}
liArr[i].onclick = function(){
count = this.index ;
animate(span,count * liWidth);
}
}
function animate(ele,target){
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var step = (target - ele.offsetLeft)/10;
step = step > 0 ? Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
if(Math.abs(target-ele.offsetLeft) <= Math.abs(step)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},10)
}
</script>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 缓动动画函数导航栏

相关文章推荐

新的分享

章节导航