jquery模拟实现鼠标指针停止运动事件_Javascript教程-查字典教程网
jquery模拟实现鼠标指针停止运动事件
jquery模拟实现鼠标指针停止运动事件
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲解了鼠标指针停止运动触发事件实例代码,分享给大家供大家参考,具体内容如下在js中有有内置的鼠标各种事件,比如click事件,mou...

本文实例讲解了鼠标指针停止运动触发事件实例代码,分享给大家供大家参考,具体内容如下

在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,说明鼠标已经停止运动。

以上就是本文的全部内容,附有详细的代码注释,希望对大家学习鼠标事件有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类