0

このブロックのjQueryエフェクトを作成しようとしています。アイデアは、マウスオーバーすると、他の写真が選択した写真を「見ている」ということです。これがhtmlコードです。

<ul class="team">
    <li><img src="pics/team/t-0001.jpg" alt=""/></li>
    <li><img src="pics/team/t-0002.jpg" alt=""/></li>
    <li><img src="pics/team/t-0003.jpg" alt=""/></li>
    ...
</ul>

理論的には、マウスがこれらのli要素の1つに置かれると、他の画像のsrc値を変更する必要があることを理解しています。また、これらのパスを格納できる配列がいくつか必要です。

しかし、実際には私には大きな問題があります。

私は最初に何をすべきですか？いくつかの例やプラグインがあるかもしれませんか？

助けていただければ幸いです。

助けてくれてありがとう！申し訳ありませんが、以前に答えることができませんでした、やるべきことがたくさんありました。

私は解決策を見つけました。非常にシンプルで柔軟性はありませんが、機能します。背景画像を使用しています。

これが例ですhttp://jsfiddle.net/KSYUC/4/

4

3 に答える 3

3

各人の画像を9枚持たないことで問題を単純化する方法のひとつは、実際には、すべての可能性を持って、人ごとに1つの合成画像を操作することです。たぶん、このようなもの（矢印は人が見ているべき方向を示しています）を1つの画像に収めます。

顔の方向

これにより、CSSを介して画像の背景位置を（画像サイズによって決定される一定の間隔を使用して）変更するだけで方向を変更できます。また、顔が変更されたときではなく、顔のすべての可能性が同時に読み込まれるという利点もあります（画像がちらついたり、事前読み込みが必要になる場合があります）。

次に、選択した顔との相対的な位置に応じて、各顔に使用する画像を計算する必要があります。それは座標間の算術比較の問題です。

したがって、選択した面に対してすべての面を反復する場合、現在のYが選択したYよりも高い場合、それは上位3つの「サブイメージ」の1つになり、Xを比較してそれが存在するかどうかを確認します。 3つのうちどれを決定するかは、以下、等しい、または大きいです。同じことが可能な面の3列すべてに当てはまります。最終的には、YとXの両方を比較することで、より少ない、等しい、またはより多くなります。このようにして、バックグラウンド位置のXとYの両方のオフセットを計算します。

于 2012-08-22T23:29:17.697 に答える
0 
$('img.smart').hover(function () {
    $(this).css('background-position':'-150px 0');
  },
  function () {
    $(this).css('background-position':'0 0');
  },
);

表示ブロック、通常の画像の幅と高さを含む1つの「ダブル」画像を配置し、cssの位置を負に変更して元に戻します。注：jQueryを簡単に選択できるように、各画像にclass="smart"を追加しました

于 2012-08-22T22:51:14.707 に答える
0

さて、通常の配列の代わりにjsonを使用することをお勧めします...なぜですか？与えられたjsonオブジェクトにユーザー名を割り当てて、そのユーザーのすべての画像と残りのユーザーの同じものを含め、マウスオーバーでそのユーザーのjsonオブジェクトをループすることができます。あなたがそのようなオブジェクトを持っていると言う

 myvalues = [{"userone":['srcone','srctwo'],"usertwo":['srcone','srctwo']}]

uはそのようにそれを繰り返します

for (var key in myvalues) {
    var obj = myvalues[key];
    for (var prop in obj) {
        alert("User:"+prop+" Valueone: "+obj[prop][0]+" Valuetwo:"+obj[prop][1]);
   }

}

http://jsfiddle.net/xRuBR/2/

于 2012-08-22T22:51:57.660 に答える