Webページの画像（Javascript）で虫眼鏡をシミュレートする方法は？
グーグルには最もクールな効果があります-かつてはパックマンゲームでしたが、今日は明らかに最初の万国博覧会の160周年であり、グーグルのロゴにはそれをイメージしています。それらまたマウスを拡大鏡に変えて、画像（金の指輪）を一掃することができます。 
彼らはどうやってそれをするのだろうか。これは明らかにJavascriptであり、ページのソースを調べましたが、特に読みやすいわけではありません（当然のことです）。
彼らのソースコードを見ると、彼らはこれを達成するためにかなり基本的な技術を使用しているようです。
埋め込まれた気の利いたアニメーションGIFをすべて無視すると、基本的に2つの画像があります。シーン全体の大小です。大きい方の画像は、ドキュメント内で3回繰り返されます。下の注釈付きの画像を見て、ズームがどのように機能するかを理解してください。 
拡大鏡の内側の部分は、上、中、下の3つのdivに分割されています。各divのオーバーフローは非表示にする必要があります。各divは、ズーム円の内側に比較的配置されています。マウスを動かしたときに、ズーム円の絶対位置をマウス座標に変更します。彼らの例では、スケーリングとアニメーションの遅延の追加にCSS3も使用しています。
これが最小限の再構築です 例 。
別の 例 全体を正方形として表示するためにdivオーバーフローを非表示にしない場合。
さて、まず、そのような効果を使用したい人のために、jQueryプラグインがたくさんあります。ここにいくつかあります：
第二に、それは非常に簡単に達成できます。フルサイズの画像を読み込むだけですが、実際の幅よりもwidth小さくして、CSSで拡大縮小します。次に、JavaScript + CSSを使用して、背景と同じ画像でDiv（虫眼鏡）を作成しますが、background-positionプロパティを、ユーザーのマウスが現在置かれている対応するスケーリングされたx,y座標に変更します。
私が思うにそれをする他の方法があります、そしてグーグルはそれを違ったやり方でするかもしれません、しかしこれは私にとって頭に浮かぶ最も明白な方法です。
実際の例とこの手法の詳細な説明については、 http://codeblab.com/glass/ にアクセスしてください。 FlashとCSSv3には、丸い虫眼鏡を作成するための十分な機能があります。しかしながら、 simulate-a-circle-with-overlapping-rectangles（多くの）より多くのプラットフォームで動作します。
（開示：codeblab.comは私の個人的な趣味のブログであり、オランダでの私の仕事への弱いリンクがいくつかあります。）
http://www.aplweb.co.uk/blog/js/magnifying-glass/ に、HTML5を含むあらゆる種類のHTMLを拡大する完全な例があります。クロスブラウザでも動作します-ほとんどのブラウザでは角が丸いのは少し厄介ですが-したがって、円ではなくボックスを使用する必要があります。
作業方法は次のとおりです。
- ズームするコンテンツを複製します
- 複製されたコンテンツを別の要素に配置し、表示される幅/高さおよびオーバーフローを非表示に設定します
- JavaScriptを使用して、複製されたコンテンツを移動し、ズーム量*マウスの動きで移動します。また、マウスの動きで表示されているdivを移動します。
それもほぼそれです。すべてのブラウザで動作させるために注意すべき点がたくさんあります。
私の地域ではロゴが表示されなくなったため、Googleがどのようにそれを行っているのかわかりません。ただし、この効果は、キャンバスを使用して通常の画像上に拡大されたアニメーションGIFをクリップすることで実現できます。または、CSS border-radius（丸みを帯びた角を実装するために一般的に使用される）を使用して円形クリッピングを作成することもできます。
編集：CSS border-radiusを使用した場合に必要な基本的なテクニックを示すためにこれを一緒にハックしました： http://jsfiddle.net/yjBuS/
ロゴ用とズーム用の2つの画像を使用しているようです（ズームされた画像は実際にスライスされ、アニメーションを個別に実行します...？）おそらく、マウスが通常のロゴの上にあるかどうかを検出して、表示します黄色い円をマウスの位置に取り付けます。次に、もう一方の画像を表示し、マウスの反対側に移動します。または同様のもの。