快捷導(dǎo)航

jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動事件

更新時間：2016年01月12日 08:58:53 作者：愚蠢的神

這篇文章主要介紹了jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動事件示例代碼，感興趣的小伙伴們可以參考一下

本文實(shí)例講解了鼠標(biāo)指針停止運(yùn)動觸發(fā)事件實(shí)例代碼，分享給大家供大家參考，具體內(nèi)容如下
在js中有有內(nèi)置的鼠標(biāo)各種事件，比如click事件，mousemove事件等等，但是并沒有鼠標(biāo)指針停止運(yùn)動這個事件，下面就利用jquery模擬實(shí)現(xiàn)此效果，希望能夠給需要的朋友帶來一定的幫助。
代碼如下:

<html>
<head>
<meta charset="gb2312">
<title>鼠標(biāo)指針停止運(yùn)動</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>

以上代碼實(shí)現(xiàn)了我們的要求，當(dāng)鼠標(biāo)指針在div中停止移動之后，就會彈出相應(yīng)div的id屬性值，下面介紹一下它的實(shí)現(xiàn)過程。
代碼注釋:
1.(function($){}(jQuery)，聲明一個匿名函數(shù)，并執(zhí)行此函數(shù)，參數(shù)為jQuery對象。
2.$.fn.moveStopEvent=function(callback{})，為jQuery實(shí)例對象添加函數(shù)。
3.return this.each(function(){})，遍歷jQuery對象集合中的每一個DOM元素對象，并且使用此對象作為上下文去執(zhí)行函數(shù)，也就是說function中的this是指向每一個DOM對象的。
4.var x=0,y=0，聲明變量x和y并賦初值為0，用來存儲鼠標(biāo)指針的上一個坐標(biāo)。
5.var x1=0,y1=0，聲明變量x1和y1并賦初值為0，用來存鼠標(biāo)指針當(dāng)前坐標(biāo)。
6.var isRun = false，聲明一個標(biāo)記，說明鼠標(biāo)指針是否在移動。
7.var timer=null，聲明一個標(biāo)記，作為定時器函數(shù)的返回值。
8.var self=this，將當(dāng)前DOM對象的引用賦值給self變量。
9.var sif=function(){}，聲明一個函數(shù)用來判斷鼠標(biāo)指針是否停止運(yùn)動。
10.timer=setInterval(function(){},500)，每隔500毫秒執(zhí)行一次函數(shù)，如果500毫秒內(nèi)鼠標(biāo)指針沒有位置變化，就認(rèn)定已經(jīng)停止移動。
11.x = x1，y = y1，將鼠標(biāo)指針的當(dāng)前坐標(biāo)存入x和y。
12.$(this).mousemove(function(e){})，為當(dāng)前對象注冊mousemove事件處理函數(shù)。
13.x1 = e.pageX，將當(dāng)前鼠標(biāo)指針橫坐標(biāo)存入x1.
14.y1 = e.pageY，將當(dāng)前鼠標(biāo)縱坐標(biāo)存入y1.
15.!isRun && sif(),isRun = true，如果當(dāng)前鼠標(biāo)出于沒有移動狀態(tài)，那么就執(zhí)行sif()函數(shù)，并且將isRun設(shè)置為true。也就是說當(dāng)鼠標(biāo)指針一直在移動的時候，保證只會執(zhí)行一次sif()函數(shù)，否則可能會執(zhí)行很多此此函數(shù)。
16.mouseout(function(){})注冊mouseout事件處理函數(shù)，當(dāng)然這是使用的鏈?zhǔn)秸{(diào)用。
17.clearInterval(timer)，停止定時器函數(shù)的運(yùn)行。
18.isRun = false，將變量的值設(shè)置為false，說明鼠標(biāo)已經(jīng)停止運(yùn)動。