首頁 > 開發者 > JavaScript
jquery類比實現滑鼠指標停止運動事件，jquery滑鼠指標
本文執行個體講解了滑鼠指標停止運動觸發事件執行個體代碼，分享給大家供大家參考，具體內容如下
在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，說明滑鼠已經停止運動。
以上就是本文的全部內容，附有詳細的代碼注釋，希望對大家學習滑鼠事件有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
