核心思想：

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. 【UOJ34】高精度乘法（FFT）

    题意: 思路:FFT模板,自带10倍常数 type cp=record x,y:double; end; arr=..]of cp; var a,b,cur:arr; n,m,n1,n2,i,j:lo ...

  2. Ubuntu 16.04在启动和关机时不显示启动和关机画面且显示详细的命令信息，没有进度条和Logo，或者只有紫色界面，或者没有开机画面等问题解决

    主要有以下解决方法: 1.如果之前配置过Grub来显示详细的命令信息的,那么改回去就行了,参考:http://www.cnblogs.com/EasonJim/p/7129873.html,通过这种方 ...

  3. Ubuntu 16.04切换/home中文目录为英文目录

    其实这个方法是具有技巧性的,不建议使用. 1.先转换成英文 sudo gedit /etc/default/locale 将内容改为: LANG=”en_US.UTF-8″ LANGUAGE=”en_ ...

  4. Eclipse错误出现：Unable to install breakpoint in... （未能解决）

    Unable to install breakpoint in... Eclipse Unable to install breakpoint in  的问题还是没解决 1.重装eclipse无效 2 ...

  5. js禁止滚动条滚动，并且滚动条不消失，页面大小不变

    //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...

  6. python-pexpect_02ssh

    #!/usr/bin/env python """ This runs a command on a remote host using SSH. At the prom ...

  7. 读写Word的组件DocX介绍与入门

    本文为转载内容: 文章原地址:http://www.cnblogs.com/asxinyu/archive/2013/02/22/2921861.html 开源Word读写组件DocX介绍与入门 阅读 ...

  8. Android开发之使用sqlite3工具操作数据库的两种方式

    使用 sqlite3 工具操作数据库的两种方式 请尊重他人的劳动成果,转载请注明出处:Android开发之使用sqlite3工具操作数据库的两种方式 http://blog.csdn.net/feng ...

  9. ios oc调用swift framework

    1.oc 调用swift /*oc调用swift, project name为DeomOC: 1.oc工程DemoOC中显式创建一个swift文件,生成DemoOC-Bridging-Header.h ...

  10. git实验室

    git clone一个项目 jiqing@jiqing-System-Product-Name:/home/wwwroot/default$ sudo git clone http://106.14. ...