zl程序教程

您现在的位置是:首页 >  前端

当前栏目

jquery鼠标停止移动事件

jQuery事件 移动 停止 鼠标
2023-06-13 09:15:14 时间

复制代码代码如下:


<scriptsrc="jquery.js"></script>
<script>
(function($){
 $.fn.moveStopEvent=function(callback){
  returnthis.each(function(){
   varx=0,
    y=0,
    x1=0,
    y1=0,
    isRun=false,
    si,
    self=this;

   varsif=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(){
 $("#div1,#div2").moveStopEvent(function(){
   alert($(this).attr("id"));
  }
 );
});
</script>
<divid="div1"style="width:200px;height:100px;background-color:#ccc;">div1</div>
<br/>
<divid="div2"style="width:200px;height:100px;background-color:#ccc;">div2</div>