tween.js 导航条

来源：互联网发布：淘宝商品id怎么看编辑：程序博客网时间：2024/05/17 02:12

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
}
#ul1{
list-style: none;
overflow: hidden;
}
#ul1 li{
float: left;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
}
#ul1 li a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: black;
}
#slider{
width: 80px;
height: 2px;
background-color: red;
position: absolute;
left: 0;
bottom: 5px;
/*transition: all 0.5s;*/
}
</style>
</head>
<body>
<div id="wrap">
<ul id="ul1">
<li><a href="#">按钮1</a></li>
<li><a href="#">按钮2</a></li>
<li><a href="#">按钮3</a></li>
<li><a href="#">按钮4</a></li>
<li><a href="#">按钮5</a></li>
</ul>
<div id="slider"></div>
</div>
</body>
<script type="text/javascript" src="tween.js"></script>
<script type="text/javascript">
//Tween.js是一款可以生成平滑的动画效果的js库
var aBtns = document.querySelectorAll("#ul1 li a");
var slider = document.querySelector("#slider");
var _width = aBtns[0].offsetWidth;
var clickable = true;

//添加点击事件
for (var i = 0; i < aBtns.length; i++) {
aBtns[i].index = i;
aBtns[i].onmouseover = function(){
if (!clickable) {
return;
}
clickable = false;
//开始的位置
var start = slider.offsetLeft;
//结束的位置
var end = this.index * _width;
//该变量
var change = end - start;
//开始的步数
var startStep = 0;
//结束的步数
var endStep = 100;
var timer = setInterval(function(){
startStep++;
if (startStep >= endStep) {
clearInterval(timer);
clickable = true;
}
console.log(change/endStep*startStep);
//参数:开始的步数开始的位置该变量结束的步数
slider.style.left = Tween.Bounce.easeOut(startStep,start,change,endStep) + 'px';
},16)
}
}

</script>

</html>

0 0