jquery计算鼠标和指定元素之间距离的方法


Posted in Javascript onJune 26, 2015

本文实例讲述了jquery计算鼠标和指定元素之间距离的方法。分享给大家供大家参考。具体实现方法如下:

(function() {
  var mX, mY, distance,
    $distance = $('#distance span'),
    $element = $('#element');
  function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
  }
  $(document).mousemove(function(e) { 
    mX = e.pageX;
    mY = e.pageY;
    distance = calculateDistance($element, mX, mY);
    $distance.text(distance);     
  });
})();

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
jquery操作angularjs对象
Jun 26 #Javascript
jQuery检查事件是否触发的方法
Jun 26 #Javascript
js限制input标签中只能输入中文
Jun 26 #Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 #Javascript
浅谈JavaScript异常处理语句
Jun 26 #Javascript
javascript实现一个数值加法函数
Jun 26 #Javascript
javascript排序函数实现数字排序
Jun 26 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
jQuery 选择器理解
2010/03/16 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
javascript常见操作汇总
2014/09/03 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
django的登录注册系统的示例代码
2018/05/14 Python
python列表使用实现名字管理系统
2019/01/30 Python
安装python及pycharm的教程图解
2019/10/10 Python
python分布式编程实现过程解析
2019/11/08 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python守护进程实现过程详解
2020/02/10 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python实现FTP循环上传文件
2020/03/20 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
《白鹅》教学反思
2014/04/13 职场文书
保证书范文大全
2014/04/28 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
钓鱼岛事件感想
2015/08/11 职场文书