シンプルな虫眼鏡効果を作成しました: fiddle . これは、ソースと同じ背景を持つ div であり、<img>画像の上にカーソルを置いている間、ポインターの位置に基づいてその位置を変更します。複雑すぎることはありません。Fiddle では、サポートしているブラウザーで問題なく動作しますpointer-events: none;(残りの部分では消えませんが、それは今のところ問題ではありません)。
<iframe>問題は、Chrome では、その Fiddle のように、コードが内部にある場合にのみ機能することです。そうでない場合は、ここのように: Fiddle、虫眼鏡の背景は、不透明度の移行が完了した後にのみ移動します。分かりやすいように1.5秒にしました。また奇妙なのは、カーソルを画像の上からホバーすると部分的に機能することです。
何が問題なのですか？そのコードを iframe 内に配置する以外に解決策はありますか? 私はjsを変更しようとしましたが、それfadeIn()/fadeOut()はjQueryで動作しますが、この場合はCSSで不透明度の遷移を行いたいと思います.
そして、タイトルをより意味のあるものに自由に変更してください:)