0

ユーザーが画像にカーソルを合わせたときにポップアップ画像を作成しようとしています。次のコードがありますが、画像を拡大するとレイアウトの流れが乱れます。レイアウトを乱さずに画像をポップアップするより良い方法があるかどうか疑問に思っていました。どうもありがとう！

   $('#image_layout img').live("hover", function(){
          var $this=$(this);

          $(this).animate({width: "30%", height: "30%"}, 'slow');

       })   not working properly.
4

4 に答える 4

2

実際には、css をサポートするブラウザーで css を使用するだけでこれを行うことができます。

#image_layout img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
});

#image_layout img:hover {
    transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
});
于 2012-08-02T00:33:04.667 に答える
0

画像自体のサイズを変更する代わりに、同じ画像で別の div を表示し、その div+image のサイズを変更する必要があります。

于 2012-08-02T00:28:59.607 に答える
0

ポップアウトを作成しようとしているので、Web サイトに position:fixed オーバーレイを配置することをお勧めします。

通常は非表示ですが、ユーザーが画像を押したときにのみ表示される div が必要です。div は position: fixed または absolute にする必要があります。これにより、レイアウト内でフローせず、他のすべてのコンテンツの上に表示されるようになります

<html>
<head><tile>My awesome title</title><head>
<body>
    <div id="photoviewer" style="display: none; position:fixed; top: xx; left: xx">
        <!--Your awesome photoviewer here -->
    </div>
    <!-- The rest of the content of your website here :) -->
</body>
</html>

次に、JQuery を使用して div "photoviewer" を表示および非表示にします。

編集:これは、フォトビューアーを作成したい場合に機能しますが、javascript/jquery マジックを使用すると、必要なホバーを作成することもできます:)、位置パラメーターを絶対に設定する必要があります。

于 2012-08-02T00:34:23.647 に答える
-1

cssを使用しないのはなぜですか。絶対位置とマージンを使用して、レイアウトを乱さないようにしてください。

#image_layout img {
    position:absolute;
    margin:_ _ _ _;
}
于 2012-08-02T00:29:16.527 に答える