jquery模擬實作滑鼠指標停止運動事件_jquery
- WBOY原創
- 2016-05-16 15:20:281299瀏覽
本文實例講解了滑鼠指標停止運動觸發事件實例程式碼，分享給大家供大家參考，具體內容如下
在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.return this.each(function(){})，遍歷jQuery對象集合中的每一個DOM元素對象，並且使用此對像作為上下文去執行函數，也就是說function中的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 timer=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，表示滑鼠已經停止運動。
以上就是本文的全部內容，附有詳細的程式碼註釋，希望對大家學習滑鼠事件有所幫助。