Javascript 鼠標移動上去小三角形滑塊緩慢跟隨效果

更新時間：2013年04月26日 14:41:40 作者：

一個tab選項卡，當鼠標移動上去時紅色滑塊跟隨,在布局過程中經(jīng)常會使用到，本文提供了詳細的實現(xiàn)代碼，感興趣的朋友可以參考下

先來一張截圖。

鼠標移動到對應的分類，下面的紅色小三角形就會自動跟隨，緩慢的跟隨。
不管有多少個都可以。
javascript code:

復制代碼代碼如下:

 
function changeCoord(id, left) { 
$$(id).style.left = left; 
} 
function $$(id) { 
return document.getElementById(id); 
} 
function $$$(id) { 
return document.getElementsByClassName(id)[0]; 
} 
function indexOf(arry, obj) { 
for (var i = 0; i < arry.length; i++) { 
if (obj == arry[i]) { 
return i; 
} 
}; 
} 
window.onload = function() { 
//給頁面上所有的滑塊注冊事件 
//products-box-center 父容器對象 

var obj = document.getElementsByClassName('products-box-center'); 
for(var i=0;i<obj.length;i++){ 
try{ 
var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //取得每一項標題 
var elems=base.getElementsByClassName('products-items-title'); 
for(var j=0;j<elems.length;j++){ 
var elem=elems[j]; 
elem.onmousemove=function(){ 
//獲得當前對象的父容器的父容器 
var baseElem=this.parentElement.parentElement; 
var baseIndex=indexOf(obj,baseElem)+1; 

//獲得當前對象的坐標 
var left = this.offsetLeft; 

//獲得對應的滑塊對象 
var slider=$$('products-triangle-'+baseIndex); 

//改變滑塊的坐標 
slider.style.left = left + "px"; 
//改變當前對象和其他對象的顏色 
this.style.color = "red"; 
//獲取當前父容器下面的所有元素 
var notes=this.parentElement.getElementsByClassName('products-items-title'); 
for(var k=0;k<notes.length;k++){ 
if(this!=notes[k]) 
notes[k].style.color="#666"; 
} 

}; 
} 

} 
catch(e){ 
alert(e); 
} 
}; 
} 

html code:

復制代碼代碼如下:

 
<div class="products-box-center"> 
<div class="products-box-center-title"> 
<div class="products-items-title products-focus-text"><h3>最新商品</h3></div> 
<div class="products-items-title"><h3>筆記本</h3></div> 
<div class="products-items-title"><h3>數(shù)碼影音</h3></div> 
<div class="products-items-title"><h3>配件</h3></div> 
<div class="products-items-title"><h3>辦公打印</h3></div> 
<div class="products-bottom-triangle" id="products-triangle-${index.count}"><b class="triangle"></b></div> 
</div> 

<div class="products-box-panel"> 

<div class="products-item"> 

<ul> 
<c:forEach begin="1" end="10"> 
<li> 
<a href="#"><img src="img/pc.jpg"/></a> 
<div class="p-name"> 
<a href="#">LG IPS237L-BN 23英寸IPS顯示器</a> 
</div> 

<div class="p-price"> 
<span>￥1299.00</span> 
</div> 

</li> 
</c:forEach> 
</ul> 
</div> 

</div> 

</div> 