新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

以上代码实现了我们的要求

本文实例讲授了鼠标指针甘休活动触发事件实例代码,分享给我们供大家参谋,具体内容如下
在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.xqwebs.com/uploads/allimg/190713/2211362Q1-0.jpg"></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),声圣元(Nutrilon)个无名氏函数,并执行此函数,参数为jQuery对象。
2.$.fn.moveStop伊芙nt=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,声美素佳儿(Karicare)个标识,表明鼠标指针是或不是在移动。
7.var timer=null,声明一个标识,作为电火花计时器函数的再次来到值。
8.var self=this,将近年来DOM对象的援引赋值给self变量。
9.var sif=function(){},声美赞臣(Meadjohnson)(Dumex)个函数用来判定鼠标指针是还是不是终止活动。
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,表达鼠标已经终止活动。

如上正是本文的全部内容,附有详细的代码注释,希望对大家学习鼠标事件有所援救。

你只怕感兴趣的文章:

  • JQuery入门——事件切换之hover()方法运用介绍
  • JQuery入门——事件切换之toggle()方法应用介绍
  • 使用JS或jQuery模拟鼠标点击a标签事件代码
  • jQuery 鼠标经过(hover)事件的延时管理示例
  • jquery事件机制扩充插件 jquery鼠标右键事件
  • jquery鼠标甘休活动事件
  • jQuery完毕单击和鼠标感应事件
  • jquery 禁止鼠标右键并监听右键事件
  • jQuery响应鼠标事件并逃匿与显示input私下认可值
  • jquery事件机制扩大插件 jquery鼠标右键事件。
  • jQuery鼠标事件下结论
  • jQuery实现鼠标移入移出事件切换来效示例

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:以上代码实现了我们的要求

您可能还会对下面的文章感兴趣: