javascript - CSS、jQuery：画像ギャラリーをズームするにはどうすればよいですか？

Question

たくさんのインラインブロックコンテナ（チェスフィールドに似ています）を保持する画像ギャラリーがあります。いいえ、ブラウザのズームstrg +マウスホイールを使用すると、画像が拡大縮小され、ズームアウトするかズームインするかに応じて、多少なりとも表示されます。

私の質問は、ブラウザのズーム機能を使用せずに、jQueryで（おそらくスライドを使用して）これを直接行う方法です。

これを行う簡単な方法はありますか、それともすべての幅の高さを変更する必要がありますか？

よろしく

Answer 1

最初の質問は、画像をどれだけズームしたいか、そしてそれらがどれくらい大きいかということです。最大解像度で画像をプリロードする必要があるため、大きな画像では遅くなる可能性があるため、質問しています。

これが問題ではないと仮定すると、私が行うことは、幅と高さの両方をアニメーション化する独自の関数を作成することです。これ以上簡単な方法はないと思います。

これ以外にも、たくさんのjQueryプラグインがあります。Googleだけで、興味深いリストを見つけました：http: //www.tripwiremagazine.com/2011/10/jquery-image-zoom.html

Answer 2

コンパクトな形でこれも試してみてください：

$('#image').mouseover(function()
{
    $(this).animate({width: "300px", height: "300px"}, 'slow');
});
$('#image').mouseout(function()
{   
    $(this).animate({width: "200px", height: "200px"}, 'slow');
});