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也能使用EXTJS视频演示
Dec 29 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
前端如何实现动画过渡效果
Feb 05 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
星际实力自我测试
2020/03/04 星际争霸
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python实现屏保计时器的示例代码
2018/08/08 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
物理专业大学生职业生涯规划书
2014/02/07 职场文书
反邪教标语
2014/06/23 职场文书
社会实践的活动方案
2014/08/22 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
税务会计岗位职责
2015/04/02 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
Python实现打乒乓小游戏
2021/09/25 Python