Javascript 鼠标移动上去小三角形滑块缓慢跟随效果

先来一张截图。鼠标移动到对应的分类，下面的红色小三角形就会自动跟随，缓慢的跟随。不管有多少个都可以。 javascript code: 复制代码代码如下: function changeCoord(id, left) { $$(id).styl

先来一张截图。

鼠标移动到对应的分类，下面的红色小三角形就会自动跟随，缓慢的跟随。
不管有多少个都可以。
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>数码影音</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>