<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style media="screen">

         .box {

             width: 300px;

             height: 200px;

             padding-top: 100px;

             margin: 100px;

             font: 18px/1.5 "simsun";

             background-color: lemonchiffon;

             text-align: center;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div class="box"></div>

     <script src="animate.js" charset="utf-8"></script>

     <script type="text/javascript">

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

         div.onmousemove = function(event){

             event = event || window.event;

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

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

             var divx = div.offsetLeft;

             var divy = div.offsetTop;

             var targetx = pagex - divx;

             var targety = pagey - divy;

             this.innerHTML = "鼠标在盒子中的X坐标：" + targetx + "px;<br />" + "鼠标在盒子中的Y坐标：" + targety + "px;";

         }

     </script>

 </body>

 </html>

javascript 获取鼠标在盒子中的坐标的更多相关文章

  1. JS——鼠标在盒子中的坐标

    核心思想: 1.复杂版本:鼠标pageX.pageY的值减去盒子距离顶端的offsetLeft.offsetTop值就是鼠标在盒子中的坐标 2.简单版本:offsetX.offsetY就可获取鼠标相对 ...

  2. WPF 3D 获取鼠标在场景的3d坐标

    原文:WPF 3D 获取鼠标在场景的3d坐标 上一篇中我们谈到了WPF 3d做图的一些简单原理,这里我们简单介绍一下怎样获得鼠标在场景中的3d坐标,知道了3d坐标就可以进行很多操作了: 首先介绍一下3 ...

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

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

  4. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  5. JavaScript获取鼠标位置的三种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...

  6. JavaScript 获取鼠标点击位置坐标

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  7. [UE4]使用PlayerController获取鼠标点击时的坐标

    1,获取鼠标在当前场景中坐标系统的中的position,加入场景地图的范围是一千平方米,那么这个position的范围也是1000米x1000米. 注册鼠标事件 FInputActionBinding ...

  8. NGUI中获取鼠标在控件内部坐标

    在UIWidget 中添加以下函数.获得的坐标系是以右上角为原点坐标,x轴向左,一轴向下. public Vector2 GetTouchPoint() { Vector3 p0 =  cachedT ...

  9. javascript获取鼠标位置

    首先不同浏览器中event位置属性的分析: 1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离) 2. Firefox的event.pageX,event. ...

随机推荐

  1. C++拷贝构造函数的调用时机

    一.拷贝构造函数调用的时机 ​ 当以拷贝的方式初始化对象时会调用拷贝构造函数,这里需要注意两个关键点,分别是以拷贝的方式和初始化对象 1. 初始化对象 初始化对象是指,为对象分配内存后第一次向内存中填 ...

  2. [学习笔记]Ubuntu下安装配置SQLSERVER2017

    摘要自微软官网: https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-ubuntu 安装步骤: 1. 导入公共秘 ...

  3. U9财务体系

  4. ionic3.x开发小坑记录（一）

    自定义font的时候,在assets中创建的文件夹名字别用fonts,会与ionic默认样式冲突,在浏览器中调试是正常的,到手机上就出问题了. 在html中写img的src直接如图  assets前面 ...

  5. grep 匹配打印的上下几行

    如果在只是想匹配模式的上下几行,grep可以实现.   $grep -5 'parttern' inputfile //打印匹配行的前后5行   $grep -C 5 'parttern' input ...

  6. RSA，JAVA私钥加密，C#公钥解密

    做这个东西在坑里爬了3天才爬出来,记录下供园友参考.C#程序员一枚,项目需要和Java做数据交互,对方甩了段密文和一个CER证书给我,然后我要对其密文进行解密. RSA 非对称加密,对方用私钥加密,我 ...

  7. pgm终

    这里罗列一些看完此书后遗留的问题: 常用 model 通过 BP/LBP 重新审视 inference 部分 Lauritzen algorithm/Lauritzen-Spiegelhalter a ...

  8. BZOJ5361[Lydsy1805月赛]对称数——主席树+随机化

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=5361 好神的一道题啊! 容易看出来是要用维护权值的数据结构,因此树链剖分首先pass掉. ...

  9. ACG图片站\python爬虫\LAMP环境

    最近突然对web很感兴趣,碰巧看到阿里云服务器学生价十块钱一个月,果断买了一个自己搭建了一个网站. 网址 这里 LAMP环境就搭建了好久,linux+apache2+mysql+php,都是开源的软件 ...

  10. spring boot 系列之五：spring boot 通过devtools进行热部署

    前面已经分享过四篇随笔: spring boot 系列之一:spring boot 入门 spring boot 系列之二:spring boot 如何修改默认端口号和contextpath spri ...