核心思想：

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. 对象和变量的并发访问synchronized解析以及死锁分析排查

    一.synchronized java并发编程中存在“非线程安全"问题.“非线程安全"是指发生在多个线程对同一个对象中的实例变量并发访问时,产生的”脏读“现象,使用synchron ...

  2. 夜话JAVA设计模式之策略模式

    策略模式     定义了算法簇,分别封装起来,让他们之间可以互相替换,让算法簇的变化独立于使用算法的客户.设计原则1     找出应用中可能需要变化之处,把他们独立出来,不要和那些不需要变化的代码混在 ...

  3. Oracle Multitenant Environment (一) About

    About oracle mulittenant environment The multitenant architecture enables an Oracle database to func ...

  4. 【CV知识学习】【转】beyond Bags of features for rec scenen categories。基于词袋模型改进的自然场景识别方法

    原博文地址:http://www.cnblogs.com/nobadfish/articles/5244637.html 原论文名叫Byeond bags of features:Spatial Py ...

  5. 怎样在Linux下使用Markdown进行文档工作

    怎样在Linux下使用Markdown进行文档工作 在Linux系统中,编辑markdown能够用retext工具: sudo apt-get install retext retext Releas ...

  6. 1. 找出数组中的单身狗OddOccurrencesInArray Find value that occurs in odd number of elements.

    找出数组中的单身狗: 1. OddOccurrencesInArray Find value that occurs in odd number of elements. A non-empty ze ...

  7. Win7 无法安装Office source engine 足够的权限安装系统服务怎么办

    运行CMD,输入命令:sc delete ose 重试即可.

  8. http://www.html5tricks.com/demo/jiaoben2255/index.html 排序算法jquery演示源代码

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  9. C#之插入排序

    算法描述 1.假定数组第一位为有序序列,抽出后一位元素与有序序列中元素依次比较: 2.如果有序序列元素大于抽出元素,将该元素向后移位: 3.重复前面步骤依次抽取无序序列中首位元素进行比较,直到所有数值 ...

  10. QSettings读写注冊表、配置文件

    简述 普通情况下.我们在开发软件过程中,都会缓存一些信息到本地,能够使用轻量级数据库sqlite.也能够操作注冊表.读写配置文件. 关于QSettings的使用前面已经介绍过了.比較具体,见" ...