<!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. “using NoSQL” under MySQL

    https://dev.mysql.com/doc/refman/5.7/en/document-store.html https://dev.mysql.com/doc/refman/5.7/en/ ...

  2. 数据驱动测试之—— Excel+TestNG

    对于利用Webdriver做自动化的童鞋,对于如何将元素或者输入数据如何和编码分离都应该不会太陌生,本着一边学习一边分享的心态,大概总结了一下关于利用CSV.XML以及Excel来存放数据,然后在结合 ...

  3. [转帖]从 2G 到 5G，手机上网话语权的三次改变

    从 2G 到 5G,手机上网话语权的三次改变 美国第一大电信运营商 Verizon 公司的 CEO Hans Vestberg 手持一部 iPad,屏幕上显示俯瞰地面的飞行地图.400 多公里外的洛杉 ...

  4. Python文件os模块

    一.文件操作 1.打开一个文件 fo = open("foo.txt", "wb") fo.write( "www.runoob.com!\nVery ...

  5. MongoDb在windows10下的安装、创建用户和数据库

    1.mongodb下载地址https://www.mongodb.com/download-center#community 2.安装    3.在D:\MongoDB目录下创建db和log两个文件夹 ...

  6. PHP 4种输出的方式

    <?php //测试用的数组 $info = array('11'=>'aaa', '22'=>'bbb', '33'=>'ccc'); //第一种,将整个数组作为一个对象输出 ...

  7. pandas合并/连接

    Pandas具有功能全面的高性能内存中连接操作,与SQL等关系数据库非常相似.Pandas提供了一个单独的merge()函数,作为DataFrame对象之间所有标准数据库连接操作的入口 - pd.me ...

  8. HTML5 & auto download image

    HTML5 & auto download image https://www.sitepoint.com/new-html5-attributes-hyperlinks-download-m ...

  9. BZOJ3456 城市规划 【生成函数】【FFT】

    题目分析: 容易想到生成函数的构造方法. 令g(n)表示n个点的无向图个数,f(n)表示n个点的无向连通图的个数.式子是显然的. 容易发现式子是卷积的形式,写出生成函数,然后多项式求逆后多项式乘法即可 ...

  10. Harmonic Number LightOJ - 1234 （分段打表）

    题意: 求调和级数,但n很大啦.. 解析: 分段打表  每间隔50存储一个数,在计算时  只需要找到离输入的n最近的那个数 以它为起点 开始计算即可 emm...补充一下调和级数的运算公式   r为常 ...