信鸽网

jquery模拟实现鼠标指针停止运动事件

  作者：bea

本文实例讲解了鼠标指针停止运动触发事件实例代码，分享给大家供大家参考，具体内容如下 在js中有有内置的鼠标各种事件，比如click事件，mousemove事件等等，但是并没有鼠标指针停止运动这个事件，下面就利用jquery模拟实现此效果，希望能够给需要的朋友带来一定的帮助。 代码如下: <html><head><meta charset="gb2312"><title>鼠标指针停止运动</title><s

本文实例讲解了鼠标指针停止运动触发事件实例代码，分享给大家供大家参考，具体内容如下
在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，说明鼠标已经停止运动。


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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: