Javascript はマウスを上に移動し、スライダーはエフェクト コードに従います。

まずスクリーンショットを撮りましょう。

マウスを対応するカテゴリに移動すると、下の小さな赤い三角形が自動的にゆっくりと追従します。
いくつあっても問題ありません。
JavaScript コード:

コードをコピー コードは次のとおりです。

function changeCoord(id, left) {
$ $(id).style.left = left;
}

function $$(id) {
return document.getElementById(id);
}

function $$$(id) {
return document.getElementsByClassName(id)[0];
}

functionindexOf(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;i try{
varbase=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.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";
//現在のオブジェクトと他のオブジェクトの色を変更します
this.style.color = "red";
//現在の親コンテナの下にあるすべての要素を取得します
var Notes =this.parentElement.getElementsByClassName ('products-items-title');
for(var k=0;k if(this!=notes[k])
メモ[k]。style.color="#666";
}

};
}

}
catch(e){
アラート(e);
}
};

}

HTML コード:

コードをコピー コードは次のとおりです:

最新商品

笔记本< ;/h3>

数码影音

付属品

办公打印

< /b>

• 
  
  
  
  LG IPS237L-BN 23英寸IPS表示器
  
  
  
  
  
  
  
  
  
  

上の html は一部であり、el 表形式で循環することができます。