1

私は虫眼鏡を開発していて、自分がどのように一歩を踏み出すかを理解するのに助けが得られることを望んでいました。

私がやっていることは、コンテンツよりも高いz-indexを持つdivを持っていることです。移動およびドラッグ可能です。また、背景が透明であるため、Zインデックスが小さいコンテンツ（画像とテキスト）の背後/下を見ることができます。

今私が助けを必要としている部分はこれです：

divの背後にあるコンテンツを正確に把握したい（IDを付けましょう#glass）。

それから私の計画は、<span>前と後ろを追加し、CSS3スケール変換でスタイルを設定してサイズを大きくし、拡大されているかのように機能させることでした。コンテンツを「拡大」する方法についてより良いアイデアがある場合は、それを共有してください。

だから私が疑似コードのスポットでやろうとしているのは：

  1. の位置を取得し#glassます。
  2. 背後にあるコンテンツを取得します#glass。
  3. それを変数に格納するか、参照するクラスなどを指定します。
  4. 前後にスパンを追加します。
  5. scale-transformでスタイルを設定します。
  6. #glassが移動したら、上記を元に戻してリセットします。

私はこれらのステップのいずれか、特に2番目と3番目のステップについて、すべての助けを本当に感謝します。私はそれらをどのように行うかわからないからです。

4

1 に答える 1

0

ページ内のすべての要素で mousemove イベントをリッスンできます。イベントが発生するたびに、最新のノードにカーソルを合わせて変数を更新します。

したがって、ガラスの周りをドラッグしていると、ガラスの背後にある要素で mousemove イベントが発生するはずです (それらの上にカーソルを置いているため)。そして、最新のノード変数を使用して、その背後にある要素を取得できます。

これがどのように行われるかを示す Jsfiddle です: http://jsfiddle.net/wWVuy/

于 2012-07-11T15:25:24.200 に答える