2

左側にサイドバーとして機能する div があり、残り (右側) は IFrame です。私のサイドバーの幅は50で、マウスがその右側にあるときはいつでも非表示になり、マウスが「<50ゾーンに入ると」サイドバーが再び表示されます。

これは可能ですか、それともクロスドメイン アクセスに問題がありますか?

4

3 に答える 3

1

あなたの質問を正しく理解していれば、マウスの位置をキャプチャすることではないと思います（pageX / pageYの原則に基づいて）。代わりに、単純に、mouseenter と mouseleave (ホバー) でアクションを起動させたいということです。

これらの結果は、DOM を適切に構築し、それを希望どおりにスタイルすることで実現できます。

マウスの位置を予測する必要がなく、コンテンツを表示するタイミングと非表示にするタイミングを簡単に指定できます。このシナリオでは、必要な を使用しており50px、ユーザーのアクションに基づいて「表示/非表示」しています。以下の jsFiddle の動作を参照してください。

編集

パフォーマンスの問題のため、私.css()は反対に使用することを選択します。.animate()微調整したい場合は、お知らせください。

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

于 2012-04-19T04:43:19.610 に答える
0

iframe の使用を開始すると、複雑な問題が発生することは間違いありません。これは機能しません。

<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>

実際、iframe 内で正常に起動するmousemoveリスナーを配置することはできませんでした。

iframe には独自のルールがあることは知っていますが、iframe とのやり取りが可能であることも知っています。残念ながら、私は実際に彼らと仕事をしていないので、答えがありません.

于 2012-04-19T04:46:50.387 に答える
0

多分このようなもの：

HTML

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

JS

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

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

http://jsfiddle.net/5VEzx/

于 2012-04-19T04:32:49.563 に答える