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中for in的用法示例解析
Dec 25 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
javascript常用经典算法详解
Jan 11 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
JavaScript"模拟事件"的注意要点详解
Feb 13 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 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语法(3)
2006/10/09 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
JS event使用方法详解
2008/04/28 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python实现学员管理系统
2019/02/26 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
C#面试常见问题
2013/02/25 面试题
协议书的格式
2014/04/23 职场文书
建国大业电影观后感
2015/06/01 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
了解Redis常见应用场景
2021/06/23 Redis