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 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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微信支付通知的处理方式
2014/05/25 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
php源码的安装方法和实例
2019/09/26 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python分析学校四六级过关情况
2017/11/22 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python如何安装第三方模块
2020/05/28 Python
python+opencv实现车道线检测
2021/02/19 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
什么是索引指示器
2012/08/20 面试题
即兴演讲稿
2014/01/04 职场文书
重阳节登山活动方案
2014/02/03 职场文书
音乐教学随笔感言
2014/02/19 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
运动会加油稿50字
2015/07/21 职场文书