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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
jquery实现动态画圆
Dec 04 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
小程序实现上下移动切换位置
Sep 23 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
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 filter_var() 函数 Filter 函数
2012/04/25 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
Javascript typeof 用法
2008/12/28 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
python创建临时文件夹的方法
2015/07/06 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
python线程、进程和协程详解
2016/07/19 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python实现大文件分割与合并
2019/07/22 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
Final类有什么特点
2012/04/25 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
上诉状格式
2015/05/23 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android