复制代码 代码如下:

正文实例解说了鼠标指针结束运动触发事件实例代码,分享给大家供大家参照他事他说加以考察,具体内容如下
在js中有有停放的鼠标种种风浪,比方click事件,mousemove事件等等,但是并不曾鼠标指针甘休运动这些事件,下边就选择jquery模拟落成此成效,希望能够给须要的仇人带来一定的救助。
代码如下:

<script src=”jquery.js”></script>
<script>
(function($){
 $.fn.moveStopEvent = function(callback){
  return this.each(function() {
   var x = 0,
    y = 0,
    x1 = 0,
    y1 = 0,
    isRun = false,
    si,
    self = this;

<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>

   var sif = function(){
    si = setInterval(function(){
         if(x == x1 && y ==y1){
          clearInterval(si);
          isRun = false;
          callback && callback.call(self);
         }
         x = x1;
         y = y1;
        }, 500);
   }

如上代码完结了我们的渴求,当鼠标指针在div中结束运动之后,就能弹出相应div的id属性值,上边介绍一下它的落到实处进度。
代码注释:
1.(function($){}(jQuery),声澳优(Ausnutria Hyproca)个无名函数,并实行此函数,参数为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,声Bellamy(Bellamy)个标志,表达鼠标指针是或不是在移动。
7.var timer=null,声美赞臣(Aptamil)(Dumex)个标识,作为机械漏刻函数的重返值。
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.澳门永利官网402,!isRun && sif(),isRun =
true,若是当前鼠标出于没有活动情状,那么就实行sif()函数,况兼将isRun设置为true。也便是说当鼠标指针一贯在运动的时候,保险只会实施壹次sif()函数,不然恐怕会进行非常多此此函数。
16.mouseout(function(){})注册mouseout事件管理函数,当然那是应用的链式调用。
澳门永利总站,17.clearInterval(timer),结束停车计时器函数的运作。
18.isRun = false,将变量的值设置为false,表明鼠标已经告一段落运动。