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插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
vue路由缓存的几种实现方式小结
Feb 02 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中处理模拟rewrite 效果
2006/12/09 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
继承公证书
2014/04/09 职场文书
青安岗事迹材料
2014/05/14 职场文书
初中毕业生感言
2015/07/31 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript