核心思想：

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. HBase的集群搭建

    前提:已经安装过jdk,HDFS集群和zookeeper,我的集群规划见HDFS的文章中 1.在1上安装配置hbase 下载:http://mirror.bit.edu.cn/apache/hbase ...

  2. git巧妙命令行

    git cherry-pick c7081607cfd1bfa99b6e6c70c208e71fbd8767ae

  3. Open Flash Chart 简介

    http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-ofc/ Open Flash Chart(OFC)是一个开源的 Flash 图表绘 ...

  4. Java 实现代理(Proxy)模式

    类图 /** * 游戏者接口 * @author stone * */ public interface IGamePlayer { // 登录游戏 public void login(String ...

  5. plsql developer 64位版本

    plsql developer 64位版本 http://www.3322.cc/soft/15748.html

  6. Java 注解入门实例 &amp;&amp; 注解传參

    參考 概念:java提供了一种原程序中的元素关联不论什么信息和不论什么元数据的途径和方法 JDK内置系统注解: @Override 用于修饰此方法覆盖了父类的方法; @Deprecated 用于修饰已 ...

  7. [JavaEE] Create API documents with Swagger

    We mainly need to modify our Model and REST endpoint code to enable swagger Document. model/Book.jav ...

  8. HDU 5311 Sequence

    Hidden String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  9. Music information retrieval

    Music information retrieval - Wikipedia https://en.wikipedia.org/wiki/Music_information_retrieval Mu ...

  10. Linux中grep命令的12个实践例子

    grep是每个Linux发行版都预装的一个强有力的文件模式搜索工具.无论何种原因,如果你的系统没有预装它的话,你可以很容易的通过系统的包管理器来安装它(Debian/Ubuntu系中的apt-get和 ...