先來一張截圖。

鼠標移動到對應的分類，下面的紅色小三角形就會自動跟隨，緩慢的跟隨。
不管有多少個都可以。
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;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表達式循環下，多搞幾個。。
一個上午才做好。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com