2012-04-19 1 views
2

왼쪽에 세로 막대 역할을하는 div가 있고 그 다음 나머지 (오른쪽)는 IFrame입니다. 내 사이드 ​​바의 너비가 50이고, 마우스가 숨겨진 오른쪽을 향하게하고 마우스가 "< 50 구역에 들어가면"사이드 바가 다시 표시되기를 원합니다.iframe을 통한 마우스 위치

이것이 가능하거나 도메인 간 액세스에 문제가 있습니까?

+0

iframe의 왼쪽 50 픽셀에서 동작을 수행하기 위해 attemps를 처리하는 방법은 무엇입니까? – Bergi

답변

1

내가 생각하는 경우 I 귀하의 질문을 바로 이해, 그것은 마우스 위치 (페이지 X/pageY 원칙에 따라) 캡처에 대한 아니에요; 대신 마우스 포인터 및 마우스를 놓는 (마우스를 올리면) 액션이 실행되도록하려는 것입니다.

DOM을 올바르게 작성한 다음 원하는대로 스타일을 지정하면 이러한 결과를 얻을 수 있습니다.

마우스 위치를 예측할 필요없이 표시 할시기와 내용을 숨길시기를 간단하게 지정할 수 있습니다. 이 시나리오에서는 사용자가 원하는대로 50px을 사용하고 있으며 사용자의 동작에 따라 '표시/숨기기'하고 있습니다. 아래 jsFiddle 작업을 참조하십시오 :

편집 나는 때문에 성능 문제의 .animate()에 반대 .css()를 사용하도록 선택할

. 비틀기를 원한다면 알려주세요.

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

+0

사실 IFrame을 늘려서 사이드 바를 숨기지 않고 전체 화면 (왼쪽의 50 픽셀 포함)을 채우고 싶습니다. 숨어서 나는 밖으로 미끄러 져야했다. – leonsas

+0

충분합니다. jsFiddle을 업데이트 할 것입니다. – Ohgodwhy

+0

이것은 기본적으로 내가 찾고 있었던 것이다. 감사! – leonsas

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/

+1

이 코드는 마우스 위치를 감지하는 문제를 일으키는 IFrame을 다루지 않습니다. – leonsas

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> 

는 사실, 나는 mousemove 청취자 어디을 배치 할 수 없습니다 iframe 내부에서 성공적으로 실행됩니다.

iframe에는 자체 규칙이 있지만, 사람들이 항상 그렇게하기 때문에 상호 작용할 수 있음을 알고 있습니다. 불행히도 은 실제로 작동하지 않으므로 답변이 없습니다.