Javascript はマウスを上に移動し、小さな三角形のスライダーがゆっくりとeffect_javascript スキルに従います。

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

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

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

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;itry{
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" ">

アクセサリ

Office 印刷

">

• < img src="img/pc.jpg"/>
  
  
  ￥1299.00 ;/span>
  
  

🎜>

上記の HTML を使用してループし、さらに作成することができます。 。 。 。
作るのに一朝かかりました。