jquery는 마우스 포인터 정지 동작을 시뮬레이션합니다.
- WBOY원래의
- 2016-05-16 15:20:281295검색
이 글의 예시는 마우스 포인터가 움직임을 멈추는 이벤트의 예시 코드를 설명하고 있으며, 구체적인 내용은 다음과 같습니다.
js에는 click 이벤트, mousemove 이벤트 등과 같은 다양한 내장 마우스 이벤트가 있지만 마우스 포인터가 움직이지 않는 이벤트는 없습니다. jquery를 사용하여 이 효과를 시뮬레이션해 보겠습니다. 도움이 필요한 친구.
코드는 다음과 같습니다.
<html>
<head>
<meta charset="gb2312">
<title>鼠标指针停止运动</title>
<style type="text/css">
#top
{
width:200px;
height:100px;
background-color:#ccc;
}
#bottom
{
width:200px;
height:100px;
background-color:#ccc;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
(function($){
$.fn.moveStopEvent = function(callback){
return this.each(function(){
var x = 0,
y = 0,
x1 = 0,
y1 = 0,
isRun = false,
si,
self = this;
var sif = function(){
si = setInterval(function(){
if(x == x1 && y ==y1)
{
clearInterval(si);
isRun = false;
callback && callback.call(self);
}
x = x1;
y = y1;
}, 500);
}
$(this).mousemove(function(e){
x1 = e.pageX;
y1 = e.pageY;
!isRun && sif(), isRun = true;
}).mouseout(function(){
clearInterval(si);
isRun = false;
});
});
}
})(jQuery);
$(function(){
$("#top,#bottom").moveStopEvent(function(){
alert($(this).attr("id"));
})
})
</script>
</head>
<body>
<div id="top">脚本之家一</div>
<br/>
<div id="bottom">脚本之家二</div>
</body>
</html>
위 코드는 우리의 요구 사항을 구현합니다. div에서 마우스 포인터의 움직임이 멈추면 해당 div의 id 속성 값이 팝업됩니다.
코드 주석:
1.(function($){}(jQuery), 익명 함수를 선언하고 이 함수를 실행합니다. 매개변수는 jQuery 객체입니다.
2.$.fn.moveStopEvent=function(callback{}), jQuery 인스턴스 객체에 함수를 추가합니다.
3. this.each(function(){})을 반환하고, jQuery 객체 컬렉션의 각 DOM 요소 객체를 순회하고, 이 객체를 컨텍스트로 사용하여 함수를 실행합니다. 이는 함수의 this가 각 DOM 객체를 가리킨다는 의미입니다. .
4.var x=0,y=0, 변수 x와 y를 선언하고 초기값을 0으로 할당합니다. 이 값은 마우스 포인터의 이전 좌표를 저장하는 데 사용됩니다.
5.var x1=0, y1=0, 변수 x1과 y1을 선언하고 초기값을 0으로 할당합니다. 이 값은 마우스 포인터의 현재 좌표를 저장하는 데 사용됩니다.
6.var isRun = false, 마우스 포인터가 움직이는지 여부를 나타내는 표시를 선언합니다.
7.var 타이머=null, 타이머 함수의 반환 값으로 표시를 선언합니다.
8.var self=this, 현재 DOM 개체의 참조를 self 변수에 할당합니다.
9.var sif=function(){}, 마우스 포인터가 움직이지 않는지 확인하는 함수를 선언합니다.
10.timer=setInterval(function(){},500), 500밀리초마다 함수를 실행합니다. 마우스 포인터가 500밀리초 이내에 위치를 변경하지 않으면 움직임이 멈춘 것으로 간주됩니다.
11.x = x1, y = y1, 마우스 포인터의 현재 좌표를 x와 y에 저장합니다.
12.$(this).mousemove(function(e){}), 현재 객체에 대한 mousemove 이벤트 처리 함수를 등록합니다.
13.x1 = e.pageX, 마우스 포인터의 현재 가로좌표를 x1에 저장합니다.
14.y1 = e.pageY, 현재 마우스 좌표를 y1에 저장합니다.
15.!isRun && sif(), isRun = true, 현재 마우스가 움직이지 않으면 sif() 함수를 실행하고 isRun을 true로 설정합니다. 즉, 마우스 포인터가 계속 움직일 때 sif() 함수는 한 번만 실행된다는 것이 보장되며, 그렇지 않으면 이러한 함수 중 다수가 실행될 수 있습니다.
16.mouseout(function(){})은 mouseout 이벤트 처리 함수를 등록합니다. 물론 이것은 사용되는 체인 호출입니다.
17.clearInterval(timer), 타이머 기능의 실행을 중지합니다.
18.isRun = false, 변수 값을 false로 설정하여 마우스 움직임이 멈췄음을 나타냅니다.
위 내용은 이 기사의 전체 내용이며, 자세한 코드 설명이 포함되어 있어 모든 사람이 마우스 이벤트를 배우는 데 도움이 되기를 바랍니다.