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

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

WBOY
リリース: 2016-05-16 17:35:17
オリジナル
1618 人が閲覧しました

まずはスクリーンショットを撮りましょう。
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 印刷





上記の HTML を使用してループし、さらに作成することができます。 。 。 。
作るのに一朝かかりました。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!