核心思想：

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. UVa - 12617 - How Lader

    先上题目:   How Lader  Lader is a game that is played in a regular hexagonal board (all sides equal, all ...

  2. C语言试题（标准答案）

    C语言试题(标准答案) 一.单选题(每小题2分,共20小题40分) 1.1-1.5    B D A C B                1.6-1.10    C A D B C 1.11-1.1 ...

  3. [bzoj1001]狼爪兔子[平面图的最小割等于其对偶图的最短路]

    一定要仔细算内存,,,又少写一个零.. #include <bits/stdc++.h> using namespace std; template<const int _n,con ...

  4. 给nginx生成自签名证书

    https://blog.csdn.net/qq_26819733/article/details/53431662 https://www.liaoxuefeng.com/article/00141 ...

  5. [kuangbin带你飞]专题四 最短路练习 G MPI Maelstrom

    #include<iostream> #include<cstring> #include<algorithm> #include<iomanip> # ...

  6. tar 查看压缩包内容

  7. 5分钟APIG实战： 使用Rust语言快速构建API能力开放

    序言:Rust语言简介 参与过C/C++大型项目的同学可能都经历过因为Null Pointer.Memory Leak等问题“被” 加班了不知道多少个晚上.别沮丧,你不是一个人,Mozilla Fir ...

  8. javax.xml.transform.TransformerConfigurationException: Could not compile stylesheet

    今天在调代码的时候遇到了一个异常: javax.xml.transform.TransformerConfigurationException: Could not compile styleshee ...

  9. MongoDB 开机自启动

    MongoDB安装了以后,应当设置开机自启动. 假设启动命令如下: sudo /db/mongodb/265/bin/mongod --config /db/conf/mongodb/mongodb. ...

  10. Android 自带Base64加密解密

    Android项目引用不到以下两个java类 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; Android有自己的base ...