Javascript 鼠标移动上去 滑块跟随效果

先来一张截图。

鼠标移动到对应的分类，下面的红色小三角形就会自动跟随，缓慢的跟随。

不管有多少个都可以。

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.οnmοusemοve=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>数码影音</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>

上面的html是部分，可以用el表达式循环下，多搞几个。。。

一个上午才做好。。。