onMouseMove

Language/JAVASCRIPT 2010. 5. 10. 15:17

이 예는 mousemove 이벤트를 이용해 웹 문서에서 마우스를 따라 다니는 그림을 나타낸 것으로 마우스가 이동하는 곳으로 아래의 노란색 병아리가 따라 다니게 된다.
 

 

onmousemove.htm

<html>
<head>
<title>onmousemove</title>
<script-x language="JavaScript-x">
    currentX = currentY = 0;
    function moveEl(e) {
      chickID = document.getElementById("chick")
 if (navigator.vendor){
        currentX = (e.pageX);
        currentY = (e.pageY);
  }else{
        currentX = (event.clientX + document.body.scrollLeft);
        currentY = (event.clientY + document.body.scrollTop);
  }  
         chickID.style.visibility = "visible";
         chickID.style.left = currentX;
         chickID.style.top =  currentY;
    }
document.onmousemove = moveEl;  
</script-x>
<style>
<!--
span { font-weight:bold; font-size:18pt; color:white; background-color:black; }
-->
</style>
</head>

<body>
<p align="center"><span>onmousemove 이벤트</span><p>
<div id="chick" style="width:59px; height:57px; position:absolute; left:26px; top:14px; z-index:1; visibility:hidden;">
    <p><img src="chick_search.gif" width="50" height="53" border="0"></p>
</div>
</p>
</body>
</html> 

 

document.onmousemove = moveEl;  
document에서 mousemove 이벤트가 발생하면 moveEl 함수가 호출된다. 나머지는 바로 앞 예와 같음으로 생략한다.

[출처] onMouseMove|작성자 해피캐빈

저작자표시 비영리

'Language > JAVASCRIPT' 카테고리의 다른 글

onClick | onDblClick | onFocus | onBlur  (0) 2010.05.10
onMouseDown | onMouseUp | onMOuseOver | onMouseOut  (0) 2010.05.10
onAbort | onReset | onSubmit  (0) 2010.05.10
키코드 (keyCode)  (0) 2010.05.10
이벤트 정의와 사용  (0) 2010.05.10
:

티스토리툴바