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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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
收集的PHP中与数组相关的函数
2007/03/22 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
怎样写留学自荐信
2013/11/11 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
秸秆管理实施方案
2014/03/15 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书