1

調香師のウェブサイトで、棚に 9 本のボトルを並べて表示しています。一枚の連続した写真のように見えます。これを 9 つのシームレスなスライスに切り分け、それぞれが独自の ID を持つ独自のテーブル セルに配置されます。

ロールオーバー時に次のことが必要なため、jQuery を使用することを考えています。

  • ボトルブリッツは瞬時に明るく、短いサウンドファイルもトリガーします。
  • 1 ～ 2 ミリ秒後、通常の状態に戻ります。
  • アクションは、ぼやけて再マウスオーバーされた場合にのみ繰り返されます。
  • 9本のボトルそれぞれに同じ効果があります。

マウスダウン (クリック) はおそらく効果を必要とせず、その特定のボトルのページをフロント ページの iframe にターゲットするだけです。私は9つのaltを作りました。ホワイトアウトであるが、タイミング効果のあるスクリプトの書き方がわからないスライス。

閃光？そこに行かないでください。それは私を単純なナッツにします。OTOHさん、jQueryはエレガントだと思います。

ロールオーバーの開始時に一時的に画像の上に白いスプライトを配置する方が簡単でしょうか? どうすればそれを行うことができますか？よろしくお願いします！

4

2 に答える 2

0

最初にロールオーバーイメージを実装するためのスクリプトはありますか？その場合、追加する必要があるのは.delay()、ロールオーバーイメージを無効にする機能を備えたjQueryの呼び出しだけです。.delay()関数の詳細については、jQueryAPIを参照してください。

ロールオーバーを開始して実行するためのヘルプが必要な場合は、この質問への回答で探しているものが見つかる可能性があります。

于 2010-08-04T03:15:36.497 に答える
0

jQuery をまったく使用せずにこれを行うことになりました。まっすぐな Javascript だけです。JavaScript コードでは、画像を処理するために 2 つの関数が必要になります。

function imgOn(id) {
    document.getElementById(id).src = 'img_on.jpg';
    setTimeout("imgOff('"+id+"')",1000);
}

function imgOff(id) {
    document.getElementById(id).src = 'img_off.jpg';
}

ここで重要なのは、イメージ ファイルを正しく設定し、必要なタイムアウトを設定することです。img_on.jpg白いボトルのファイル名に置き換え、img_off.jpg通常のボトルのファイル名に置き換えます。また、1秒後に元に戻るように設定されています。この時間を調整する1000には、 を別の値に変更します。

実際に画像を表示するときは、次の HTML を使用します。

<span onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</span>

各画像の id に一意の値があること、および id に使用する値が onMouseOver および onMouseOut 呼び出しでも使用されることを確認してください。これらの画像がリンクとして機能している場合は、代わりに次のものを使用できます。

<a href='page.html' onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</a>
于 2010-08-07T09:02:23.853 に答える