function changeCoord( id, left ) {
$$(id).style.left = left;
}
function $$(id) {
return document.getElementById(id);
🎜>関数 $$$(id) {
return document.getElementsByClassName(id)[0];
}
関数 IndexOf(arry, obj) {
for (var i = 0; i < arry .length; i ) {
if (obj == arry[i]) {
return i;
}
window.onload = 関数() {
//ページ上のすべてのスライダーのイベントを登録します
//products-box-center 親コンテナ オブジェクト
var obj = document.getElementsByClassName('products-box-center') ;
for(var i=0;i
try{
varbase=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(){
//現在のオブジェクトの親コンテナを取得します
varbaseElem=this.parentElement.parentElement; varbaseIndex=indexOf (obj,baseElem) 1;
//現在のオブジェクトの座標を取得します
var left = this.offsetLeft;
//対応するスライダー オブジェクトを取得します
var slider= $$('products-triangle-'baseIndex);
//スライダーの座標を変更します
slider.style.left = left "px";現在のオブジェクトと他のオブジェクトを変更します。 Color
this.style.color = "red";
//現在の親コンテナーの下にあるすべての要素を取得します
varnotes=this.parentElement.getElementsByClassName('products-items -title');
for(var k=0;kif(this!=notes[k])
notes[k].style.color= #666";
}
};
}
}
catch(e){
alert(e);
}
コードは次のとおりです。
"products-items-title products-focus -text">
最新の製品
ノートブック
デジタルビデオ
"products-items-title" ">
アクセサリ
上記の HTML を使用してループし、さらに作成することができます。 。 。 。
作るのに一朝かかりました。