<!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. pandas的to_csv()使用细节和一些参数

    dt.to_csv('C:/Users/think/Desktop/Result.csv',sep='?')#使用?分隔需要保存的数据,如果不写,默认是, dt.to_csv('C:/Users/th ...

  2. [2017BUAA软工]第0次作业

    第0次作业 Part 1:结缘计算机 1. 你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 我跟这篇博客中的作者相似的地方在于,我们都在一个比较早的阶段接触了计算机,我家乡的经济在全国来 ...

  3. 配置Activiti Explorer使用MYSQL

    http://blog.csdn.net/lxxxzzl/article/details/39583977

  4. 原生js作用域（红宝书）

    function fn(){ ; alert(a); // 2; } alert(a);//未被定义: alert(b);//全局变量:b=2: ; function fn1(){ ; functio ...

  5. asp.net core 2.0中的配置（1）---Configuration

    配置就是一个装配数据字典的过程,一个字典也就是一个键值对,所以从配置就是键值对. 在asp.net core中关于配置是由四个基本的类型来支撑的,是①IConfigurationSource②ICon ...

  6. [转帖]简析数据中心三大Overlay技术

    简析数据中心三大Overlay技术 http://www.jifang360.com/news/20161010/n225987768.html 搭建大规模的云计算环境需要数据中心突破多种技术难题,其 ...

  7. Visual Studio 2017 激活密钥 [复制记录]

    Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(VS201 ...

  8. Oracle18c Exadata 版本安装介质安装失败。

    下载下来的介质安装失败 白费一早上的功夫.. 一会儿问问云和恩墨的人呢.. INFO: [-- ::] Skipping line: 复制数据库文件 INFO: [-- ::] Skipping li ...

  9. jvm学习二：类加载器

    前一节详细的聊了一下类的加载过程,本节聊一聊类的加载工具,类加载器  ---  ClassLoader 本想自己写的,查资料的时候查到一篇大神的文章,写的十分详细 大家直接过去看吧http://blo ...

  10. C从源码到运行发生了哪些事

    一个C/C++程序从源代码到可执行程序主要经历了四个阶段: ①预处理.包括展开宏.处理#include,#if,#ifdef等指令.删除注释.还有一些其他操作.相关命令:gcc -E或cpp ②编译. ...