导航条在大多数网站都有应用，今天我们用Tween.js来做一个下方有动态效果的导航条。
图片来源于网络.jpg
HTML5部分
什么是tween.js？
tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
<body>
<!--div.wrap>div{按钮$}*4-->
<div class="wrap">
<div class="middle">
<div>按钮1</div>
<div>按钮2</div>
<div>按钮3</div>
<div>按钮4</div>
</div>
</div>
<div class="slider"></div>
</body>
CSS3样式部分
<style type="text/css">
.wrap{
width: 400px;
height: 100px;
background-color: gray;
}
.middle{
width: 100%;
height: 80px;
background-color: greenyellow;
}
.middle>div{
width: 100px;
height: 100%;
text-align: center;
font-size: 20px;
line-height: 80px;
float: left;
}
.slider{
width: 100px;
height: 10px;
border-radius: 5px;
background-color: brown;
position: absolute;
}
</style>
以上部分除了slider要绝对定位没什么要特别注意的
静态效果如下
静态.PNG
js部分
分析逻辑
1.鼠标在导航条外时,下彩条
slider在起始位置
2.slider随鼠标滑动到相应位置
tween.js效果说明-来源于网络
首先引入tween.js然后定义变量
tween.js下载链接http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
文件.png
如果放在别的文件夹里就引用自相对的文件夹
<script src="js/tween.js" type="text/javascript"></script>
<script type="text/javascript">
var divs=document.querySelectorAll(".middle>div");
var slider=document.querySelector(".slider");
var timer = null;
操作
for(var i=0;i<divs.length;i++){
divs[i].index=i;
divs[i].onmouseover=function(){
var start = slider.offsetLeft
//多加的8是网页自带的边框
var end = this.index*100+8;
var change = end-start;
var t=0;
//duration循环次数
var d=20;
//防止定时器混乱,每次用前清一下
clearInterval(timer);
timer = setInterval(function () {
t++;
if (t >= d) {
clearInterval(timer);
}
//结构:Tween动画库.Back动画类型.easeOut缓冲类型
slider.style.left = Tween.Back.easeOut(t, start, change, d) + "px";
}, 30);
}
}
</script>
此处说明
1.var end = this.index*100+8;的8是浏览器自带样式,如果用了
*{
margin:0;
padding:0
}
等类似清楚浏览器样式代码则不用加8;
2.Tween动画库.Back动画类型.easeOut缓冲类型(缓冲类型3种,动画类型10种,详细样式看上图效果说明);
3.t起始时间;start起始位置;change变化量;d循环次数
4.为防止每次点击效果互相影响,每次调用前清定时器
clearInterval(timer);
5.slider.style.left后记得加px;
动态效果如下
效果.gif
网友评论