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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
js键盘事件实现人物的行走
Jan 17 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php zip文件解压类代码
2009/12/02 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python快速查找算法应用实例
2014/09/26 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
基于python实现地址和经纬度转换
2020/05/19 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
会计岗位描述
2014/02/22 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
基于Python实现射击小游戏的制作
2022/04/06 Python