先来一张截图。
鼠标移动到对应的分类，下面的红色小三角形就会自动跟随，缓慢的跟随。
不管有多少个都可以。
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 if (obj == arry[i]) {
return i;
}
};
}
window.onload = function() {
//给页面上所有的滑块注册事件
//products-box-center 父容器对象
var obj = document.getelementsbyclassname('products-box-center');
for(var i=0;itry{
var base=obj[i].getelementsbyclassname('products-box-center-title')[0]; //取得每一项标题
var elems=base.getelementsbyclassname('products-items-title');
for(var j=0;jvar 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;kif(this!=notes[k])
notes[k].style.color=#666;
}
};
}
}
catch(e){
alert(e);
}
};
}
html code:
复制代码 代码如下:
最新商品
笔记本
数码影音
配件
办公打印
lg ips237l-bn 23英寸ips显示器
￥1299.00
上面的html是部分，可以用el表达式循环下，多搞几个。。。
一个上午才做好。