2

わかった、

画像を含む要素にカーソルを合わせる<li>と、画像が大きくなります（Google画像のサムネイルのように）

<div>
    <ul class="images">
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
    </ul>
</div>

問題は、li だけをアニメーション化すると、他の写真が動き、デザインが壊れてしまうことです。

必要に応じて、ここに私のjsfiddleがあります...ありがとう

4

5 に答える 5

2

あなたのliは相対的に配置され、その中に絶対配置された要素が含まれている必要があります。リーのホバー状態は、この他の要素を展開させますが、それらは「position:absolute」であるため、他のリーの配置には影響しません。

のように (疑似コード):

li{width:150px; height:100px; position:relative}
li span{width:150px; height:100px; position:absolute; top:0; left:0; display:block}
li:hover span{width:200px; height:150px; top:-25px; left:-25px}

また、JavaScript を使用して、img のsrc属性を変更して、ホバー時に小さなサムネイルやより詳細な画像を読み込むこともできます。

アニメーションが必要な場合は、それにjQuery Animateを追加するだけです。

于 2013-05-23T16:34:57.143 に答える
0

私はあなたがこのような必要があると思います

これは、要件に応じた単純な疑似コードであり、何が必要なのか正確にはわかりません。

jQueryコード

$('.images img').on({
    mouseenter: function(){
        $(this).animate({width: '170px', height: '120px', top: '-=15px', left: '-=15px'}, 500);
    },
    mouseleave: function(){
        $(this).animate({width: '150px', height: '100px', top: '+=15px', left: '+=15px'}, 500);
    }
});

ライブデモを見る

于 2013-05-23T16:32:02.523 に答える
0

そのためのさまざまなプラグインをここで見つけることができます。それらは素晴らしいプラグインです

于 2013-05-23T16:29:24.023 に答える
-2

i 最後に、CSS3 トランジションのみを使用して、jQuery を使用せずに画像をアニメーション化する最も簡単な方法を見つけました。

img
{
    width: 90%;
    height: 90%;
    -webkit-transition: max-width 0.5s, height 0.5s;
       -moz-transition: max-width 0.5s, height 0.5s;
          o-transition: max-width 0.5s, height 0.5s;
            transition: max-width 0.5s, height 0.5s;
}

img:hover
{
        width: 120%;
    height: 120%;
}
于 2013-05-30T15:14:24.813 に答える