iframeを介したマウスの位置

左側にサイドバーとして動作するdivがあり、残りの部分（右側）がIFrameです。サイドバーの幅が50で、マウスが隠れているときはいつでも、マウスが「< 50ゾーンに入る」とサイドバーが再び表示されます。iframeを介したマウスの位置

これが可能か、クロスドメインアクセスに問題がありますか？

2012-04-19 leonsas

iframeの左側の50ピクセルでアクションを実行するにはどうすればよいですか？ – Bergi

私は、If Iと思いますあなたの質問を正しく理解しました。マウスの位置をキャプチャすることではありません（pageX/pageYの原則に基づいています）。代わりに、単にマウスを動かしてマウスを離したとき（ホバー）に行動を起こさせたいということです。

DOMを適切に構築し、必要に応じてスタイルを設定することで、これらの結果を達成できます。

マウスの位置を予測することなく、表示するタイミングとコンテンツを非表示にするタイミングを簡単に指定できます。このシナリオでは、あなたが望む50pxを使用しており、ユーザーの行動に基づいて「表示/非表示」しています。私はので、パフォーマンスの問題の.animate()とは対照的に、.css()を使用することを選択し

EDIT

：以下の作業jsFiddleを参照してください。それを微調整したい場合は、私に教えてください。

http://jsfiddle.net/YGmN3/3/

出典

2012-04-19 04:43:19 Ohgodwhy

実際には、IFrameをストレッチしてサイドバーを非表示にするだけでなく、画面全体（左端の50ピクセルを含む）に塗りつぶしてください。隠すことによって私は外に出ることを意味しました。 – leonsas

十分に公正。これを行うためにjsFiddleを更新します。 – Ohgodwhy

これは基本的に私が探していたものです。ありがとう！ – leonsas

たぶん、このような何か：

HTML

<div id="sidebar" style="float:left; width:50px; background-color:green; height:250px;"></div>

$("html").mousemove(function(event) 
{ 

    var xPos = event.pageX; 
    if (xPos <= 50) 
    { 
     $("#sidebar").show(); 
    } 
    else 
    { 
     $("#sidebar").hide(); 
    } 
});

http://jsfiddle.net/5VEzx/

出典

2012-04-19 04:32:49 wkm

このコードはIFrameを処理しません。これはまさにマウスの位置を検出する問題を引き起こします。 – leonsas

あなたは、アイフレームを使用して起動したときにかかわる合併症は間違いなくあります - これは動作しません。実際には

<Doctype! html> 

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <style> 
      body iframe { 
       margin-left: 100; 
       border: 2px solid red; 
      } 
     </style> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script> 
      $(function(){ 
       $(document).on('mousemove', function(evt){ 
        $('#pagex').text(evt.pageX); 
       }); 
      }) 
     </script> 
    </head> 
    <body> 
     <div id="pagex"></div> 
     <iframe id="theframe"> 
      <div id="innepage"></div> 
     <script type="text/javascript"> 
       $(document).on('mousemove', function(evt){ 
         console.log(evt); 
        $('#innerpage').text(evt.pageX); 
       }); 
     </script> 
     </iframe> 
    </body> 
</html>

を、私はどこでもmousemoveリスナーを配置することができませんでしたiframeの内部で正常に起動します。

iframeには独自のルールがあることは知っていますが、人々が常にそれをやるので、それらとやり取りすることも可能です。残念ながら私はとは実際には動作しませんので、答えはありません。

出典

2012-04-19 04:46:50 quodlibetor

iframeを介したマウスの位置

答えて

関連する問題