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 相关文章推荐
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
puppeteer库入门初探
Jan 09 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 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创建Cookie数组的详解
2013/07/03 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
js获取域名的方法
2015/01/27 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python3 集合set入门基础
2020/02/10 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
外语系大学生自荐信范文
2014/03/01 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
如何通过一篇文章了解Python中的生成器
2022/04/02 Python