0

マウスが画像の上にあるときにこの画像のサイズが大きくなり、マウスが画像の外にある場合はサイズが小さくなり、これらすべてがスムーズな移行として行われるjqueryプラグインがあるかどうか疑問に思っています。ありがとう！

4

3 に答える 3

1

Zoomer ギャラリー プラグインを試すか、このチュートリアルに基づいて自分で作成してください。個人的には、結果をより詳細に制御できるようになるため、チュートリアルのルートに進みます（そして、起動する何かを学ぶことができます;）

于 2010-08-15T23:10:40.523 に答える
1

画像が 1 つだけ必要な場合は、jQuery の UI 効果を使用できます。これはベース jQuery とは別のものであることに注意してください。これを jQuery の呼び出しの下に追加してください。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

UI へのリンクを追加したので、そのエフェクト ライブラリを次のように使用できます。

脚本：

$(document).ready(function() {
    $('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)})
});

html:

<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">

何かを拡大するときは、新しいサイズが 100% になるため、縮小する方法を理解する必要があることを覚えておいてください。私のコードでは、それを 2 倍 (200%) にしてから半分 (50%) に減らして元に戻します。トランジション タイムや、完璧にするために必要なコールバックを自由に試してみてください。

jQuery .hover()およびjQuery UI 効果へのリンク

于 2010-08-15T23:25:00.500 に答える
0

jQueryハックがあります：

$(document).ready(function() {
    $('#target_selector').mouseover(function(){
        $(this).css('height':'value', 'width':'value')
        $(this).mouseout(function(){
            $('this').css('height':'value', 'width':'value')
        });
    });
});

ただし、CSS 疑似クラス :hover を使用できます

#target_selector {
    height: value;
    width: value;
}
#target_selector:hover {
    height: value;
    width: value;
}

どちらもこのサンプル HTML に適用できます

<html>

<body>

    <img id="target_selector" />

</body>

</html>
于 2012-04-27T09:03:17.630 に答える