0

こんにちは、基本的に私がやりたいことは、同じイベントを異なる画像に発生させ、コード行を .js ファイルに 1 回だけ書き込むことです。これは非常に基本的なはずですが、簡単なガイドが見つかりません。

これはコードの 1 つのサンプルであり、ページごとに少なくとも 2 回あります。

<ul class="car-slide">
        <li onmouseover="$('fp1').fade( {duration:.2, from:1, to:0.8 }); return false;" onmouseout="$('fp1').appear( {duration:.2}); return false;"><img src="{{skin url='myimage1'}}" id="fp1"></li>
        <li onmouseover="$('fp2').fade( {duration:.2, from:1, to:0.8 }); return false;" onmouseout="$('fp2').appear( {duration:.2}); return false;" style="border-left:1px solid #000;border-right:1px solid #000;"><img src="{{skin url='myimage2'}}" id="fp2"></li>
        <li onmouseover="$('fp3').fade( {duration:.2, from:1, to:0.8 }); return false;" onmouseout="$('fp3').appear( {duration:.2}); return false;"><img src="{{skin url='myimage3'}}" id="fp3"></li>
    </ul>

つまり、このリストでは 3 回同じで、2 回あります。js で構文を実行する方法と、html で参照する方法がわかりません。

また、2 番目の li にちらつきの問題がある理由を知っていれば、特に 1 番目と 3 番目の li にはまったく問題がないのに高速で移動する場合は、それは素晴らしいことです (追加のスタイリングに関連している可能性がありますが、それでも奇妙です)。

4

2 に答える 2

0

私の知る限り、Scriptaculous は PrototypeJS の拡張機能です。だからあなたはそれを調べたいです。

複数のインスタンスを選択したい場合は、それらに CSS クラスを与えます。HTML は次のようになります。

<ul class="car-slide" id="carslider">
    <li class="carsliderfade"><img src="{{skin url='myimage1'}}" id="fp1"></li>
    <li class="carsliderfade" style="border-left:1px solid #000;border-right:1px solid #000;"><img src="{{skin url='myimage2'}}" id="fp2"></li>
    <li class="carsliderfade"><img src="{{skin url='myimage3'}}" id="fp3"></li>
</ul>

現在、プロトタイプのアニメーションなどについてはわかりません（私はjQueryの人です）。ただし、プロトタイプで複数のインスタンスを選択する方法は次のとおりです。途中で役立つはずです：

$('carslider').getElementsByClassName('carsliderfade')....

これにより、指定された <ul> 内のすべての <li> 要素が選択されます

それが役に立てば幸い

出典:プロトタイプ API

于 2010-12-01T08:38:43.037 に答える
0

これを試して

$$('.car-slide')[0].select('.carsliderfade').each(function(el){
    el.observe('mouseover', function(){ el.fade( {duration:.2, from:1, to:0.8 }); });
    el.observe('mouseout', function(){ el.appear( {duration:.2}); })
})
于 2010-12-01T09:27:39.323 に答える