<!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. CI框架2.x的验证码中所遇问题解决

    用php版本是5.6,CI框架版本是2.x,在使用验证码(captcha)时,遇到一些问题. 首先,我查看框架手册,说必需的两个参数是"img_url",“img_path”,其他 ...

  2. vue路由异步组件案例

    最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...

  3. Selenium Grid的Java调用方法

    java -jar selenium-server-standalone-.jar -role hub explorer http://192.168.1.173:4444/grid/console ...

  4. Hot code replace (HCR)

    https://wiki.eclipse.org/FAQ_What_is_hot_code_replace%3F https://zhidao.baidu.com/question/195505558 ...

  5. Redis应用一例（存证数量用计数器实现）

    public Long getCreationCounter() { String host =PropertyUtils.getPropertyValue("redis.server.ho ...

  6. [转载]Linux目录说明

    原作者博客: http://blog.51cto.com/yangrong/1288072 将文字部分转移到自己的目录下便于学习记录 感谢~ 2./目录 目录 描述 / 第一层次结构的根.整个文件系统 ...

  7. poj 1904(强连通分量+输入输出外挂)

    题目链接:http://poj.org/problem?id=1904 题意:有n个王子,每个王子都有k个喜欢的妹子,每个王子只能和喜欢的妹子结婚,大臣给出一个匹配表,每个王子都和一个妹子结婚,但是国 ...

  8. 自省 另外一种python 生成随机在base36 之间的兑换码生成。

    放假无聊,翻看自己博客的时候发现自己前面写的 那个base36兑换码在翻阅的时候 想到一个更简单的办法实现.但是随机上来说可能没有前者那么高 但是觉得也没有多大的问题 发上来 自己再想想 import ...

  9. gitbook 简单使用

    gitbook 简单使用 之前由于公司培训过使用 gitbook,当时也没有进行安装使用.当时就感觉就是 markdown 语法,加上我本来就是使用 markdown 进行写博客之类.再加上这个东西本 ...

  10. 开启打印服务Print Spooler

    windows系统需要开启Print Spooler才能进行打印,如果不开启,可能造成很多现象和原因,比如windows打印机队列的打印机全部消失,用Lodop打印的时候提示"Printer ...