javascript - 円形レンズを持つようにjquery loupeをカスタマイズするにはどうすればよいですか?

Question

どのようにカスタマイズできるかについて、javascript / css忍者の考えをいただければ幸いです。

長方形ではなく円形のズーム領域を使用するには? ルーペの CSS クラスを設定するオプションがあります。

これは、上記のリンク先のライブラリに関する質問であることに注意してください。私はすでに他のライブラリを探しています。jsをできるだけ小さくしたい。

score 3 · Accepted Answer

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

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のすべての古いバージョンは正方形を表示するだけですが、あなたの場合はおそらく問題ありませんか？

score 1 · Accepted Answer

loupe.jsの開発者から：

chris iuferのルーペを見たいと思うかもしれません。これは私のものより少しだけ大きく、css3を使用して丸いルーペを実現するいくつかのサンプルが含まれています。

私はdiv内の絶対位置の画像を使用しますが、彼はdivのbackground-imageとbackground-positionを使用して画像を移動するため、css3border-radiusが機能します。

2 に答える 2