获取鼠标在盒子里的位置

前言：

原文扩展：

获取鼠标在位置里的位置，活动区域仅限于盒子内部，so，x的值就是盒子的宽，y的值就是盒子的高

<!DOCTYPE html>
<html>
<head lang="en">  <meta charset="UTF-8">  <title></title>  <style>  *{margin: 0;padding: 0;}.box{  width: 100px;  height: 100px;  background-color: pink;  margin: 100px;  }  </style>
</head>
<body>  <div class="box">  </div>  <p id="xyshow">鼠标放在盒子里移动</p><script src="jquery.min.js"></script><script>  $("body").on("mousemove",".box",function(){var _this=$('.box');var mouh = evfun(_this,event);$("#xyshow").html('当前在盒子里位置是x'+mouh.x+' y'+mouh.y);})function evfun(_this,event){event = event || window.event;  //2.获取鼠标在整个页面的位置  var pagex = event.pageX || scroll().left + event.clientX; var pagey = event.pageY || scroll().top + event.clientY; //3.获取盒子在整个页面的位置  var xx =$(_this).offset().left;  var yy = $(_this).offset().top;//4.用鼠标的位置减去盒子的位置var targetx = pagex - xx;  var targety = pagey - yy; var xydata={x:targetx,y:targety}return xydata}//封装的scrollTopfunction scroll() {  if(window.pageYOffset != null) {  // ie9+ 高版本浏览器// 因为 window.pageYOffset 默认的是  0  所以这里需要判断return {left: window.pageXOffset,top: window.pageYOffset}}else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTDreturn {left: document.documentElement.scrollLeft,top: document.documentElement.scrollTop}}return {   // 未声明 DTDleft: document.body.scrollLeft,top: document.body.scrollTop}}</script>
</body>
</html>

效果：

获取鼠标在盒子里的位置相关推荐

动态获取鼠标在盒子里的位置
CSS部分 div {padding-top: 50px;height: 250px;width: 300px;font: 400 16px/60px "simsun";text- ...
WPF中获取鼠标相对于屏幕的位置
WPF中获取鼠标相对于屏幕的位置周银辉 WPF编程时,我们经常使用Mouse.GetPosition(IInputElement ...
获取鼠标在盒子中的坐标
1.在盒子内点击,想要得到鼠标距离盒子左右的距离想到鼠标事件,但是并不是对于盒子而言的 2.首先得到鼠标在页面中的坐标(pageX.pageY) 3.其次得到盒子在页面中的距离 4.距离一减,就能 ...
鼠标事件练习：移动鼠标后获取鼠标距离盒子的X轴和Y轴的值
<style> *{margin: 0;padding: 0; } .box{width: 150px;height: 150px;background-color: greenyello ...
java获取鼠标在屏幕中的位置方法一_Java如何获取鼠标指针的位置？
MouseInfo 提供获取有关鼠标信息的方法,例如鼠标指针的位置和鼠标按钮的数量.package org.nhooo.example.awt; import java.awt.*; public c ...
java获取鼠标在屏幕中的位置方法一_Java在多个监视器环境中获取鼠标位置
基本上,我所做的是取 PointerInfo 并从中减去 GraphicsDevice 界限,如果结果少于 0 (因为屏幕是主屏幕左侧),我将结果乘以 -1 解决方案的核心看起来像这样...... / ...
html 获取鼠标在canvas上的坐标,html5-canvas 检测鼠标在画布上的位置
示例本示例将说明如何获取鼠标相对于画布的位置,例如(0,0)HTML5 Canvas的左上角.的e.clientX和e.clientY将获得相对于文档的顶部位置的鼠标,来改变这种是基于画布的顶部,我 ...
cesium获取点击内容信息_Cesium获取鼠标点击位置（PickPosition）
cesium学习了这么长时间,有时候写鼠标点击事件时,想获取鼠标点击点位置,发现情况很多.比如以下情形: 1获取鼠标点的对应椭球面位置 2获取加载地形后对应的经纬度和高程 3获取倾斜摄影或模型点击处的 ...
qt开发之获取鼠标的相对位置和绝对位置
原文链接:https://blog.csdn.net/humanking7/article/details/80707591 本博文转自祥的博客,感谢博主的分享.若在此篇博文存在期间涉及侵权等相关问题 ...

获取鼠标在盒子里的位置

获取鼠标在盒子里的位置相关推荐

最新文章

热门文章