画像の残りの部分を同じサイズのままにして、画像を拡大するプラグインを見つけるのに苦労しているようです。
私がそれを必要とする理由は、私が画像マップを使用していて、特定の大陸の画像にズームインしようとしているからです。ズームインしたら、ズームインした画像をその特定の大陸の新しい画像と画像マップに置き換えます。これが起こっているときに、世界地図の残りの部分のサイズを変更したくありません。
誰かがこれのための良いプラグインを知っていますか?
画像の残りの部分を同じサイズのままにして、画像を拡大するプラグインを見つけるのに苦労しているようです。
私がそれを必要とする理由は、私が画像マップを使用していて、特定の大陸の画像にズームインしようとしているからです。ズームインしたら、ズームインした画像をその特定の大陸の新しい画像と画像マップに置き換えます。これが起こっているときに、世界地図の残りの部分のサイズを変更したくありません。
誰かがこれのための良いプラグインを知っていますか?
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3で、必要なものに近いものを示すチュートリアルと、そこに到達する方法を見つけました。
別のものがあります:http://mlens.musings.it/
編集:ジャスティンのコメントに基づく:
ここで話しているのは、実際のズームアニメーションです。フェードインアニメーションを実行できたので、単に置き換えるだけではありません。
これを実現するには、jQueryのanimate()メソッドを使用します。
コード:
$(function(){ $('#zoomimage')。click(function(){ $(this).animate({高さ: '150%'、幅: '150%'}、500); }); });
編集:ジャスティンの次のコメントに基づく:
ちょっとアディティア、唯一の問題はサイズが影響を受けるということです。それが成長するにつれてそれをトリミングして同じサイズを維持する方法はありますか?
これは、画像のコンテナを操作して、画像の成長中に画像の残りの部分を非表示にすることで実行できます。このようなもの:
<div style="width:275px; height:95px; overflow:hidden;">
<img src="https://www.google.com/images/srpr/logo3w.png" id="zoomimage" />
</div>
は、画像のoverflow:hidden;
残りの部分が表示されないようにします。