jquery鼠标停止移动事件

 更新时间:2013年12月21日 16:06:04   作者:  
这篇文章主要介绍了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;

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

相关文章

  • jquery实现的省市区三级联动

    jquery实现的省市区三级联动

    在做项目的时候,我们经常需要用到地址之类的省市区三级联动的,今天就给大家分享一个非常简洁的省市区三级联动的代码,基于jQuery,附上GIT地址,有需要的小伙伴可以直接拿走
    2015-04-04
  • jQuery中innerWidth()方法用法实例

    jQuery中innerWidth()方法用法实例

    这篇文章主要介绍了jQuery中innerWidth()方法用法,实例分析了innerWidth()方法的功能、定义及获取第一个匹配元素内部区域宽度的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery.validate自定义验证用法实例分析【成功提示与择要提示】

    jquery.validate自定义验证用法实例分析【成功提示与择要提示】

    这篇文章主要介绍了jquery.validate自定义验证用法,结合实例形式分析了jQuery成功提示与择要提示验证操作相关实现与使用技巧,需要的朋友可以参考下
    2020-06-06
  • JQuery实现可直接编辑的表格

    JQuery实现可直接编辑的表格

    这篇文章主要介绍了JQuery实现可直接编辑的表格,实例分析了jQuery动态操作编辑表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • jQuery实现动态添加和删除input框代码实例

    jQuery实现动态添加和删除input框代码实例

    这篇文章主要介绍了jQuery实现动态添加和删除input框,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • jquery使用append(content)方法注意事项分享

    jquery使用append(content)方法注意事项分享

    append(content)函数的功能向每个匹配的元素内部追加内容,在使用方法上需要引起大家的注意,详细看下面示例
    2014-01-01
  • jquery平滑滚动到顶部插件使用详解

    jquery平滑滚动到顶部插件使用详解

    这篇文章主要为大家详细介绍了基于jquery平滑滚动到顶部插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jQuery中Form相关知识汇总

    jQuery中Form相关知识汇总

    这篇文章主要介绍了jQuery中Form相关知识汇总,总结的十分全面,需要的朋友可以参考下
    2015-01-01
  • jquery点击展示与隐藏更多内容

    jquery点击展示与隐藏更多内容

    这篇文章主要为大家详细介绍了jquery点击展示与隐藏更多内容的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • layui前段框架日期控件使用方法详解

    layui前段框架日期控件使用方法详解

    这篇文章主要为大家详细介绍了layui前段框架日期控件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论