jqueryループをカスタマイズして円形のレンズを持つにはどうすればよいですか？

Question

私がカスタマイズする方法について、JavaScript / CSS忍者の考えに感謝します：

https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js

長方形の領域の代わりに円形のズームエリアを持つには？ループのCSSクラスを設定するオプションがあります。

これは上記のライブラリに関する質問であることに注意してください。私はすでに他のライブラリをグーグルで検索しています。 JSをできるだけ小さくしたいです。

Answer 1

loupe.jsの開発者から：

Chris IuferのLoupeを見てみると、私のものよりも少し大きく、CSS3を使用して丸いループを実現するいくつかのサンプルを含めます。

http://chrisiufer.com/loupe/sample.html

鉱山はDiv内で絶対に配置された画像を使用しますが、彼はDivとバックグラウンドポジションでの背景イメージを使用して画像を移動するため、CSS3 Border-Radiusは機能します。

Answer 2

これを行う最も簡単な方法は、CSS3 Border-Radiusを使用することだと思います。これは、すべてのWebブラウザーの最新のバージョンでサポートされています（バージョン9よりも低くはありません）。

JavaScriptにこれを持っている場合

$('selector').loupe({
    width: 150, // width of magnifier
    height: 150, // height of magnifier
    loupe: 'loupe' // css class for magnifier
});

これをCSSに入れてください：

.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}

...そして、IEのすべての古いバージョンは正方形を表示するだけです。