鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随。
不管有多少个都可以。
javascript code:

首頁  >  文章  >  web前端  >  Javascript 滑鼠移動上去小三角形滑桿緩慢跟著效果_javascript技巧

Javascript 滑鼠移動上去小三角形滑桿緩慢跟著效果_javascript技巧

WBOY
WBOY原創
2016-05-16 17:35:171619瀏覽

先來一張截圖。
Javascript 滑鼠移動上去小三角形滑桿緩慢跟著效果_javascript技巧 
老鼠移動到對應的分類,下面的紅色小三角形就會自動跟隨,緩慢的跟隨。
不管有幾個都可以。
javascript code:

複製程式碼 程式碼如下:

function leftfid ) {
$$(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:
複製程式碼 代碼如下:

最新商品


筆記本


數位影音


配件


辦公室印刷










上面的html是部分,可以用el表達式循環下,多搞幾個。 。 。
一個上午才做好。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn