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 性能优化指南 (1)
May 21 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
javascript实现tab切换特效
Nov 12 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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 session处理的定制
2009/03/16 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
预备党员党课思想汇报
2014/01/13 职场文书
个人简历自我评价范文
2014/02/04 职场文书
经典婚礼主持词
2014/03/13 职场文书
公司员工活动策划方案
2014/08/20 职场文书
甘南现象心得体会
2014/09/11 职场文书
Oracle笔记
2021/04/05 Oracle
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
使用Apache Camel表达REST服务的方法
2022/06/10 Servers