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下为Event handler传递动态参数的代码
Jan 06 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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中通过curl smtp发送邮件
2012/06/05 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python匿名函数用法实例分析
2019/08/03 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
三个Unix的命令面试题
2015/04/12 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
生物制药自我鉴定
2014/01/25 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
安全生产演讲稿
2014/05/09 职场文书
小学假期安全广播稿
2014/09/28 职场文书
长城导游词
2015/01/30 职场文书
工作收入证明范本
2015/06/12 职场文书
创业计划书之干洗店
2019/09/10 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
PYTHON InceptionV3模型的复现详解
2022/05/06 Python