その画像の中心から伸びる画像上の丸いマスク

Question

いくつかのボタンをクリックすると、ビニールレコードの画像を表示する必要があります。画像はボタンの横のどこかに表示され、丸く見える透明なPNGです。 問題は、画像の中心にあるドットからアニメーション化し、全体の「レコード」を表示するように拡大するサークルマスクを使用して表示する必要があることです。画像をズーム/リサイズすることなく「記録」画像を表示する、丸みを帯びたアニメーションマスクを作成する方法。

誰かが、JavaScriptやjQueryライブラリーをよく知っていますか？

あなたがそのようなことを別の言語で知っていると、私自身のものを書くのに役立つかもしれません。

ありがとうございました。

Answer 1

おそらく、あなたは中央にアルファ透明度の穴に大きな白い（または背景色）PNGを作成することができます。これを公開する画像の上に置き、中心点に固定したまま拡大します。下にある画像全体が透明な穴の中に入るように拡大したら、カバーしている画像を削除します。

これはどのように（おそらくひどく）実行するのか分かりませんが、それは考えです。

Answer 2

HTMLは原則として矩形で表示されます。透過画像を使用している場合は、中心を一定にして拡大/縮小できます。

円内でのみ選択できるようにする必要がある場合は、クリック操作のマウス座標を確認して、円内にあるかどうか、四角形を含むかどうかを確認する必要があります。参照：How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery

@ 6bytes丸いコーナーを使用することをお勧めします。

現在、ChromeとFireFoxはborder-radiusと-moz-border-radiusのCSS属性を使用して角丸を囲んでいるため、50%の境界半径で視覚的に円を達成できます。しかし、これは下にある四角形の視覚的な違いに過ぎず、四角形内のクリックは円自体の上に数えられます。

#circle { 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 

基本矩形デモ：http://jsfiddle.net/rL4BU/2/

あなたはクリックがこの問題を解決するための円内にあるかどうかを確認するにはいくつかのコードを置くことができます。

サークルクリックデモ：http://jsfiddle.net/rL4BU/4/