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>

赞 (0)

相关推荐

  • jQuery鼠标事件总结

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.下面就来系统的介绍一下jQuery鼠标事件. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click(function(){ alert('click function is running !'); } ); (2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置.一般双击事件在页面中不经常使用. $('p')

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

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

  • jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

    触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3

  • jQuery鼠标事件汇总

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. 1.click事件:点击鼠标左键时触发 $('p').click(function(){}); 示例: $('p').click(function(){ alert('click function is running !'); }); 2.dbclick事件:迅速连续的两次点击时触发 $('p').dbclick(function(){}); 示例: $("button").dblclick(function(){ $(&

  • jQuery实现单击和鼠标感应事件

    1.实现单击事件动态交替 之前我们讲到了toggleClass(),对于单击事件而言,jQuery同样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用. 例子:点击事件的动态交互. 复制代码 代码如下: <script type="text/javascript">             $(function() {                 $("#ddd").toggle(     

  • JavaScript和JQuery的鼠标mouse事件冒泡处理

    简单的鼠标移动事件: 进入 复制代码 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 复制代码 代码如下: mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题

  • 使用JS或jQuery模拟鼠标点击a标签事件代码

    复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &

  • jquery事件机制扩展插件 jquery鼠标右键事件。

    jquery事件机制扩展插件 jquery鼠标右键事件。

    jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种

  • 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

  • jQuery 鼠标经过(hover)事件的延时处理示例

    jQuery 鼠标经过(hover)事件的延时处理示例

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干

  • jquery事件机制扩展插件 jquery鼠标右键事件

    因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

  • jQuery实现鼠标移入移出事件切换功能示例

    jQuery实现鼠标移入移出事件切换功能示例

    本文实例讲述了jQuery实现鼠标移入移出事件切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script> <style> #msg { color

  • jquery中的常用事件bind、hover、toggle等示例介绍

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序

  • 浅谈jQuery hover(over, out)事件函数

    hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q

  • 浅谈jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

  • Jquery鼠标放上去显示全名的实现方法

    第一种方式 使用mouseover.mouseout事件 // 鼠标滑过显示全名 var origin_name; $('.task_name').mouseover(function() { origin_name = $(this).text(); $(this).text($(this).nextAll("input").val()); }).mouseout(function() { $(this).text(origin_name); }); 第二种方式 使用a标签的titl

随机推荐