0

jquery を使用して、この画像ホバーズーム部分に取り組んでいます。大きな画像がmouseenterで表示され、mouseleaveで非表示になるため、コードは正常に機能します。ホバー時に表示される画像は動的な幅と高さを持つことができるため（画像サイズによって異なります..）、画像の幅と高さを実際の幅と高さの75％に減らしたい..それでも問題なく動作します..

今私が直面している問題は、マウスが2回目に入ると、画像が再び縮小されることです.3回目は2回目よりも小さくなります...したがって、マウスが入るたびに画像がどんどん小さくなります...マウスを入力するたびに画像が75％縮小されるため、明らかだと思います...）グローバル変数を作成してチェックインするなど、多くのことを試しました.. if（初めて）thn（縮小）else（元から縮小）画像 ）。

しかし、それを機能させることはできません..ここに私のコードがあります....

http://jsfiddle.net/ugnNU/11/

アドバイスを期待しています。あなたの助けに感謝します。

ありがとう。

4

3 に答える 3

2

コードをできるだけ更新しないようにしました。これは、あなたがやろうとしていると私が思うことを行う方法の例です。 http://jsfiddle.net/ugnNU/12/

そこにたどり着くにはたくさんの方法がありますが、あなたがすでに持っていたものに近かったので、私はこれを選びました.

私はこれを追加しました：

var childImage = $(this).children("div.tooltip");

if (childImage.attr('saveWidth') == ""){
   //we haven't saved it's height yet
   childImage.attr('saveWidth', childImage.width()); 
   childImage.attr('saveHeight', childImage.height());
}

var hoverImgWidth = childImage.attr('saveWidth');
var finalHoverImagewidth = hoverImgWidth * 0.75;

var hoverImgHeight = childImage.attr('saveHeight');
var finalHoverImageWidth = hoverImgHeight * 0.75;

基本的には、「ツールチップ」の画像の高さが属性内に既に保存されているかどうかを確認するだけです。ある場合は、その値を使用するだけです。ただし、そうでない場合は、その属性内に高さまたは幅を保存してから使用します。

また、("div.tooltip") を 1 回だけ選択して .xml に保存していchildImageます。この理由は、この jQuery を実行するたび$(selector)に、その要素を見つけに行かなければならないからです。これを頻繁に行うと、パフォーマンスに影響を与える可能性があります。したがって、セレクターをローカル変数に保存することをお勧めします。

于 2012-10-15T14:37:11.690 に答える
1

http://jsfiddle.net/ugnNU/13/

カスタム属性は使用しません。mouseenterで行ったことを、mouseleaveで元に戻すだけです

于 2012-10-15T14:39:03.277 に答える
-1

このコードを呼び出すたびに

    var hoverImgWidth = $(this).children("div.tooltip").width();
    var finalHoverImagewidth = hoverImgWidth * 0.75;

div.tooltip の幅の値は 0.75 で乗算されます。

次にコードが実行されると、現在の幅 (下げられた値) が取得され、再び下げられます。

非表示にするときにサイズを元に戻すこともできますが、ドキュメントの準備ができたら値を計算し、mouseenter イベントと mouseleave イベントでのみ画像を表示および非表示にすることをお勧めします。

于 2012-10-15T14:38:12.640 に答える