これを使用して、ホバー時の画像プレビューを機能させることができましたが、マウスを動かすと、プレビューが一緒に移動し、「一部を隠して」Webページの境界をエスケープします。 Facebookの写真ズームプラグインのようなウェブページ?
1 に答える
上記の Fiddle のコードを使用して、Facebook Photo Zoom プラグインが使用しているように見えるものと同様のロジックを使用するいくつかの実用的なコードで新しい Fiddle を作成しました。カーソルが画像の上部に移動すると、プレビュー画像の上部がページの上部に配置されるように設定され、カーソルを画像の特定のポイントの下に移動すると、プレビュー画像がページの下に移動し始めますそれと。
他にも考慮する必要がある要因があります。たとえば、ユーザーがプレビュー イメージの表示中にマウス カーソルをその上にすばやく移動すると、プレビューが削除されます。プレビュー画像を削除するか、プレビュー画像を削除する前にマウスカーソルの現在の位置を確認する際に、何らかの遅延が必要になるだけです。
ここで実際のコードを参照してください: http://jsfiddle.net/f7rJB/2/
このコードは、プレビュー イメージがページの境界からはみ出さないようにするためのものであり、プレビューがカーソルの移動とともにページを下に移動することを示すためのものであり、完全なソリューションを意図したものではないことに注意してください。
jQuery には、ページ上のマウスの位置を見つけるための優れたドキュメントがあります: http://docs.jquery.com/Tutorials:Mouse_Position