你的位置:首页 > Java教程

[Java教程]鼠标指针停止运动触发事件实例代码


鼠标指针停止运动触发事件实例代码:
在js中有有内置的鼠标各种事件,比如click事件,mousemove事件等等,但是并没有鼠标指针停止运动这个事件,下面就利用jquery模拟实现此效果,希望能够给需要的朋友带来一定的帮助。
代码如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><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,说明鼠标已经停止运动。
二.相关阅读:
1.$.fn可以参阅jQuery.fn的作用是什么一章节。
2.this可以参阅javascript的this用法详解一章节。  
3.each()函数可以参阅jQuery的each()方法一章节。
4.setInterval()函数可以参阅setInterval()函数用法详解一章节。 
5.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。 
6.call()函数可以参阅javascript的call()和apply()的作用和区别一章节。 
7.mousemove事件可以参阅jQuery的mousemove事件一章节。
8.pageX属性可以参阅jQuery的event.pageX属性一章节。  
9.mouseout事件可以参阅jQuery的mouseout事件一章节。 
10.attr()函数可以参阅jQuery的attr()方法一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11355

更多内容可以参阅:http://www.softwhy.com/jquery/