導航條在大多數網站都有應用，今天我們用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
