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 trim函数 去空格函数与正则集锦
Nov 20 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
webpack入门+react环境配置
Feb 08 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
微信小程序 Storage更新详解
Jul 16 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实现的简易扫雷游戏实例
2015/07/09 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python中pika模块问题的深入探究
2018/10/13 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
DataReader和DataSet的异同
2014/12/31 面试题
实习教师自我鉴定
2013/12/12 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
课内比教学心得体会
2014/09/09 职场文书
个人借条范本
2015/05/25 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
服务器间如何实现文件共享
2022/05/20 Servers
cypress测试本地web应用
2022/06/01 Javascript