20

グーグルは最もクールな効果を持っています-かつてはパックマンゲームでしたが、今日は明らかに最初の万国博覧会の160周年であり、グーグルのロゴにはそれをイメージしています。また、マウスを拡大鏡に変えて、画像（金の指輪）を一掃することもできます 。ここに画像の説明を入力してください

彼らはどうやってそれをするのだろうか。これは明らかにJavascriptであり、ページのソースを調べましたが、特に読みやすいわけではありません（当然のことです）。

4

6 に答える 6

16

ソース コードを見ると、かなり基本的な手法を使用してこれを実現しているように見えます。

埋め込まれた気の利いたアニメーション gif をすべて無視すると、基本的に 2 つの画像があります - シーン全体の大小です。大きな画像はドキュメント内で 3 回繰り返されます。下の注釈付きの画像を見て、ズームがどのように機能するかをよりよく理解してください。 注釈付きズーム

拡大円の内側の部分は、上、中、下の 3 つの div に分割されます。各 div のオーバーフローは非表示にする必要があります。各 div は、ズーム サークル内に相対的に配置されます。マウスの移動時に、ズーム円の絶対位置をマウス座標に変更します。彼らの例では、スケーリングとアニメーションの遅延の追加に CSS3 も使用しています。

これは、最小限の再構築された例です。

全体を正方形として表示するために div オーバーフローを非表示にしない別の例。

于 2011-05-01T21:25:04.400 に答える
11

まず、このようなエフェクトを使いたい人のために、jQuery プラグインがたくさんあります。以下にいくつかを示します。

  1. パワーズーマー
  2. 主な画像のズーマー
  3. クラウドズーム

第二に、達成するのは非常に簡単です。フルサイズの画像をロードするだけですが、width実際の幅よりも小さいので、CSS によってスケーリングされます。次に、JavaScript+CSS を使用して、背景と同じ画像で Div (虫めがね) を作成しますが、プロパティを、ユーザーのマウスが現在置かれてbackground-positionいる対応するスケーリングされた座標に変更します。x,y

他にも方法はあると思いますし、Google は別の方法で行っているかもしれませんが、これが私が思いつく最も明白な方法です。

于 2011-05-01T15:54:33.870 に答える
6

実際の例とこの手法の詳細な説明については、http://codeblab.com/glass/にアクセスしてください。Flash と CSS v3 には、丸い虫眼鏡を作成するための十分な機能があります。ただし、simulate-a-circle-with-overlapping-rectangles(多くの) より多くのプラットフォームで動作します。

(開示: codeblab.com は私の個人的な趣味のブログで、オランダでの私の仕事への弱いリンクがいくつかあります。)

于 2012-10-17T14:03:15.080 に答える
5

http://www.aplweb.co.uk/blog/js/magnifying-glass/には、HTML5 を含む、あらゆる種類の HTML を拡大する完全な例があります。クロスブラウザでも動作します - ほとんどのブラウザでは丸みを帯びた角は少し不安定ですが - そのため、円ではなくボックスを使用する必要があります.

動作する方法は次のとおりです。

  1. ズームしたいコンテンツを複製する
  2. 複製されたコンテンツを別の要素に配置し、表示される幅/高さとオーバーフローを非表示に設定します
  3. JavaScript を使用して、複製されたコンテンツをズーム量 * マウスの動きで移動するように移動します。マウスの動きで表示されている div も移動します。

それもほとんどそれです。ただし、すべてのブラウザで動作させるために注意すべき点がたくさんあります。

于 2011-08-05T18:01:49.530 に答える
4

私の地域ではロゴが表示されなくなったので、Google がどのようにそれを行っているのかわかりません。ただし、この効果は、キャンバスを使用して通常の画像の上に拡大されたアニメーション GIF をクリッピングすることで実現できます。別の方法として、CSS の border-radius (角を丸くするために一般的に使用されます) を使用して、円形のクリッピングを作成することもできます。

編集: CSS ボーダー半径を使用する場合に必要な基本的なテクニックを示すために、これを一緒にハックしました: http://jsfiddle.net/yjBuS/

于 2011-05-01T15:58:32.987 に答える
0

1つはロゴ用、もう1つはズーム用の2つの画像を使用しているようです（アニメーションを個別に実行するために、ズームされた画像は実際にスライスされています...?）おそらく、マウスが通常のロゴの上にあるかどうかを検出し、表示します黄色の円をクリックして、マウスの位置に取り付けます。次に、他の画像を表示し、マウスの反対側に移動します。または似たようなもの。

于 2011-05-01T16:03:52.183 に答える