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 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
微信小程序实现录音功能
Nov 22 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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 smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python饼状图的绘制实例
2019/01/15 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
什么是python的必选参数
2020/06/21 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
入学申请自荐信范文
2014/02/26 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL