3

ズーム画像のような効果をjQuery+背景位置アニメーションで再現できますか？

このようなもの：http：//www.sohtanaka.com/web-design/examples/image-zoom/

つまり、画像サイズをアニメーション化する代わりに（ブラウザが画像のサイズを大幅に変更するため、これは面倒です）、リンクに背景画像を設定してアニメーションを作成し、リンクの位置とサイズをアニメーション化します。

編集：

アイデアは2つの画像を使用することです。例えば：

  • 2つの重なり合った画像、1つは200 x 200ピクセル、もう1つは400x400ピクセル
  • 1番目の画像のみが表示され、2番目の画像は1番目の画像の後ろに非表示になり、200x200にサイズ変更されます。
  • ユーザーがその上にカーソルを合わせると、最初の画像が400 x 400に拡大され、同時にフェードアウトします
  • 2番目の画像はフェードインし、同時に元のサイズ（400 x 400）に拡大されます

これはjqueryでどのように達成できますか？

4

2 に答える 2

2

CSS

#div{
    background: url('http://images.epilogue.net/users/sirgerg/phoenix_nebula.jpg') top no-repeat;
    background-size: 10%;
    height: 490px;
    width: 490px;
}

JS

$('#div').hover(function (){
    $(this).animate({
        'background-size': '50%'
    })
}, function (){
    $(this).animate({
        'background-size': '10%'
    })
})

HTML

 <div id="div"></div>

JSFIDDLEについて

説明：最新のChromeでのみ機能します

参考：CSSで背景画像のサイズを設定しますか？

于 2011-04-05T04:47:27.380 に答える
1

あなたはこのように意味します

$('div').hover(function() {
    $(this).animate({
        width: 400,
        height: 400
    })
}, function() {
    $(this).animate({
        width: 200,
        height: 200
    })
})

http://jsfiddle.net/vm4wQ/で実際の例を確認してください

于 2011-04-05T04:26:40.870 に答える