마우스가 멈 추면 Ballon 툴팁을 표시하는 방법

Question

그래서 아래에 제안 된 자바 스크립트 툴팁 중 하나를 사용했습니다. 내가 움직이면 멈추고 숨길 때의 조언을 얻었습니다. .

document.onmousemove = (function() { 
    var onmousestop = function() { 
     Tip('Click to search here'); 
     document.getElementById('MyDiv').onmousemove = function() { 
     UnTip(); 
    }; 
    }, thread; 

    return function() { 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})(); 

하지만 내가 할 수있는 기능을 원하는 경우에만 특정 사업부에 적용하고 내가 첫 번째 라인을 변경하는 경우에 "document.getElementById를 ('MyDiv')으로 onMouseMove = 유일한 문제는 그것이 내가이 작업을 수행 할 때 작동합니다 (함수() { "나는 ?? 자바 스크립트 오류 document.getElementById를 ('MyDiv')가 나는 .... 실종 무엇 널 얻을

[/ 편집]

나는 풍선 스타일을 표시 할 사용자가 1.5 초 이상 요소에서 마우스를 멈추었을 때 메시지를 보낸 다음 마우스를 움직이면 풍선을 숨기고 싶습니다. 일부 JavaScript 코드를 사용하려고합니다. 야생.

document.onmousemove = (function() { 
    var onmousestop = function() { 
     //code to show the ballon 
     }; 
    }, thread; 

    return function() { 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})(); 

그래서 나는이 개 질문이 : 저는 여기에 마우스가 정지 한 때를 감지하기 위해 사용하고있는 코드입니다. 하나는, 누군가가 커서 위치에 표시됩니다 권장 경량 자바 스크립트 풍선있다. 그리고 두 가지, 감지 된 마우스 정지 코드는 정상적으로 작동하지만 마우스가 다시 움직이기 시작하고 풍선을 감추는 것을 감지하는 방법에 난처한 상황입니다. 고마워요 ...

Answer 1

답변이 늦어 지지만 도움이 필요한 사람들에게 도움이 될 것입니다.

비디오 위로 마우스를 가져 가면 마우스가 특정 시간 동안 HTML/JS 플레이어 컨트롤러를 숨기지 않을 때이를 감지 할 수 있어야합니다.이 개정 된 툴팁에 대한 코드입니다

$('div.video')[0].onmousemove = (function() { 
    var onmousestop = function() { 
     $('div.controls').fadeOut('fast'); 
    }, thread; 

    return function() { 
     $('div.controls').fadeIn('fast'); 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})(); 

: 내 경우

document.getElementById('MyDiv').onmousemove = (function() { 
    var onmousestop = function() { 
     Tip('Click to search here'); 
    }, thread; 

    return function() { 
     UnTip(); 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})(); 

, 내 플레이어 컨트롤러의 요소를 선택 jQuery를 조금 사용

Answer 2

여기 멋진 float over tool tip을위한 훌륭한 jQuery 플러그인이 있습니다.

http://jqueryfordesigners.com/demo/coda-bubble.html

[편집] 나는 동반자가 잘못 무슨 말을하기 어렵다 HTML 보지 않고 같아요. 요소에 태그에 지정된 적절한 ID가 있는지 확인합니다. 그 외에도, 이것이 학문적 인 연습이 아니라면 위에서 언급 한 jQuery 플러그인과 같은 것을 사용하는 것이 좋습니다. 당신이 현재 다루고있는 모든 세부 사항을 이미 다룰 수있는 다른 많은 사전 제작 도구가 있습니다.

Answer 3

document.onmousemove = (function() { 
    if($('balloon').visible) { 
    //mouse is moving again 
}....//your code follows 

사용하여 Prototype.js 구문 당신은 풍선이 표시되면 마우스가 이동 한 것을 확인할 수 있습니다.

Answer 4

jQuery 플러그인 hoverIntent도 비슷한 동작을 제공합니다. 사용자가 특정 요소 위로 마우스를 가져 가면 요소로 이동하고 특정 요소 위로 마우스를 가져 가면 특정 요소 위에 마우스를 올리려는 의도가 있는지를 결정합니다.

사용자가 요소를 떠날 때 "나가는"이벤트 만 발생하며, 사용자가 찾고있는 것과 똑같지는 않지만 코드는 매우 간단합니다.

이벤트를 수집 할 필요가 없을 때 mousemove에 바인딩하는 것에주의하십시오. mousemove는 많은 이벤트를 빠르게 발생시키고 사이트 성능에 심각한 영향을 줄 수 있습니다. hoverIntent는 커서가 활성 요소에 들어갈 때만 mousemove를 바인드하고 나중에 바인드 해제합니다.

hoverIntent를 시도해보십시오. "out"이벤트를 발생시키지 않는 축소 버전에 약간의 문제가 있으므로 완전하지 않은 원본을 사용하는 것이 좋습니다.