核心思想：

1、复杂版本：鼠标pageX、pageY的值减去盒子距离顶端的offsetLeft、offsetTop值就是鼠标在盒子中的坐标

2、简单版本：offsetX、offsetY就可获取鼠标相对于事件触发对象的坐标，以事件触发对象左上角为基准点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            width: 400px;

            height: 400px;

            background-color: #ccc;

            margin: 150px auto;

            font: 600 17px/400px "simsun";

            text-align: center;

        }

        span {

            color: red;

        }

    </style>

</head>

<body>

<div>

    鼠标在盒子中的坐标X:000 Y:000

</div>

<script>

    var divEle = document.getElementsByTagName("div")[0];

    divEle.onmousemove = function (ev) {

        ev = ev || window.event;

        var pageX = ev.pageX || scroll().left + ev.clientX;

        var pageY = ev.pageY || scroll().top + ev.clientY;

        var x = pageX - divEle.offsetLeft;

        var y = pageY - divEle.offsetTop;

        divEle.innerHTML = "鼠标在盒子中的坐标X:" + "<span>" + x + "</span>" +

            " Y:" + "<span>" + y + "</span>";

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            width: 400px;

            height: 400px;

            background-color: #ccc;

            margin: 150px auto;

            font: 600 17px/400px "simsun";

            text-align: center;

        }

        span {

            color: red;

        }

    </style>

</head>

<body>

<div>

    鼠标在盒子中的坐标X:000 Y:000

</div>

<script>

    var divEle = document.getElementsByTagName("div")[0];

    divEle.onmousemove = function (ev) {

        ev = ev || window.event;

        var x = ev.offsetX;

        var y = ev.offsetY;

        divEle.innerHTML = "鼠标在盒子中的坐标X:" + "<span>" + x + "</span>" +

            " Y:" + "<span>" + y + "</span>";

    }

</script>

</body>

</html>

JS——鼠标在盒子中的坐标的更多相关文章

  1. javascript 获取鼠标在盒子中的坐标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS——拖拽盒子

    注意事项: 1.opacity是全部元素变透明,rgba只是背景色变透明 2.先是注册鼠标按下的事件,此时就需要记录鼠标在盒子中的坐标 3.再在鼠标按下事件中注册鼠标移动事件,此时鼠标的坐标是不断变化 ...

  3. JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标

    分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量 第一步:求浏览器边框位置 x=e ...

  4. javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  5. 鼠标在窗口中的坐标转换到 canvas 中的坐标

        鼠标在窗口中的坐标转换到 canvas 中的坐标 由于需要用到isPointInPath函数,所以必须得将鼠标在窗口中的坐标位置转换到canvas画布中的坐标,今天发现网上这种非常常见的写法其 ...

  6. Javascript获取当前鼠标在元素内的坐标定位

    代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  7. 获取鼠标在 canvas 中的位置

    一般情况 一般情况下,如果需要在 canvas 中获取鼠标指针坐标,可以通过监听鼠标的 mousemove(如果只需单击时的坐标,可以用 click)事件. 当事件被触发时,我们可以获取鼠标相对于 v ...

  8. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. mysql中有关树的函数

    用mysql客户端在库中建立函数queryOrgChildren(查找子节点)和queryOrgLevel(查看当前节点在树中的级别):DROP FUNCTION IF EXISTS `queryOr ...

  2. vue2源码浏览分析02

    1.组件初始化方法 init Vue.prototype._init = function (options) { /* istanbul ignore if */ if ("develop ...

  3. 学习node js 之微信公众帐号接口开发 准备工作

    绪:因工作须要,近期開始学习Node js,之前隐隐约约听到过node js 但没有实际见到过,仅仅好google了:至于什么是node js,能做些什么,有多么好.或者有哪些弊端我这里就不多说了,由 ...

  4. Visual Assist X破解版安装（vs2010助手）

    从网上下载了Visual Assist X 版本号的破解版,安装文件夹为默认的c://program files/Visual Assist X/,当我把破解的VA_X.dll粘贴到该文件夹下,VC+ ...

  5. [Vue @Component] Handle Errors and Loading with Vue Async Components

    Because async components are not bundled with your app, they need to be loaded when requested. This ...

  6. Python3基础（十） 类的初印象

    Python是一种面向对象的脚本语言,所以它也提供了面向对象编程的所有基本特征:允许多继承的类继承机制.派生类可以重写它父类的任何方法.一个方法可以调用父类中同名的方法.对象可以包含任意数量和类型的数 ...

  7. C++简单版BitSet求解大量数据是否存在莫个数

    #include <iostream> using namespace std; template<int N> class BitSet { public: BitSet() ...

  8. HDU 5305 Friends（dfs）

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Su ...

  9. MongoDB集群——分片

    1. 分片的结构及原理分片集群结构分布: 分片集群主要由三种组件组成:mongos,config server,shard1) MONGOS数据库集群请求的入口,所有的请求都通过mongos进行协调, ...

  10. MapReduce的矩阵相乘

    一.单个mapreduce的实现 转自:http://blog.sina.com.cn/s/blog_62186b460101ai1x.html 王斌_ICTIR老师的<大数据:互联网大规模数据 ...