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


Posted in Javascript onJanuary 12, 2016

本文实例讲解了鼠标指针停止运动触发事件实例代码,分享给大家供大家参考,具体内容如下
在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.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>

以上代码实现了我们的要求,当鼠标指针在div中停止移动之后,就会弹出相应div的id属性值,下面介绍一下它的实现过程。
代码注释:
1.(function($){}(jQuery),声明一个匿名函数,并执行此函数,参数为jQuery对象。
2.$.fn.moveStopEvent=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,声明一个标记,说明鼠标指针是否在移动。
7.var timer=null,声明一个标记,作为定时器函数的返回值。
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.!isRun && sif(),isRun = true,如果当前鼠标出于没有移动状态,那么就执行sif()函数,并且将isRun设置为true。也就是说当鼠标指针一直在移动的时候,保证只会执行一次sif()函数,否则可能会执行很多此此函数。
16.mouseout(function(){})注册mouseout事件处理函数,当然这是使用的链式调用。
17.clearInterval(timer),停止定时器函数的运行。
18.isRun = false,将变量的值设置为false,说明鼠标已经停止运动。

以上就是本文的全部内容,附有详细的代码注释,希望对大家学习鼠标事件有所帮助。

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
Vue头像处理方案小结
Jul 26 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 #Javascript
js右下角弹出提示框示例代码
Jan 12 #Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 #Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 #Javascript
提升jQuery的性能需要做好七件事
Jan 11 #Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 #Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 #Javascript
You might like
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php使用websocket示例详解
2014/03/12 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python排序算法实例代码
2017/08/10 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
解放思想大讨论活动心得体会
2014/09/11 职场文书
讲座通知范文
2015/04/23 职场文书
企业战略合作意向书
2015/05/08 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
爱国之歌(8首)
2019/09/29 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电