html 三角形 滑块,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

try{

var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //取得每一项标题

var elems=base.getElementsByClassName('products-items-title');

for(var j=0;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

if(this!=notes[k])

notes[k].style.color="#666";

}

};

}

}

catch(e){

alert(e);

}

};

}

html code:

最新商品

笔记本

数码影音

配件

办公打印

• 

  LG IPS237L-BN 23英寸IPS显示器

  ￥1299.00

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

一个上午才做好。