<!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. HDOJ1287_破译密码

    一道正常简单题 曲折解题 做这题的时候看了很久没有看懂是什么意思,最后以为是一道单独的数学题把B这个大写字母猜出来进行异或运算,还不知道C里面异或运算可以直接有符号的:),导致又去学习了一下十进制转换 ...

  2. Chrome查看HTTP

    查找cookie 补充: 接口调试使用postman挺不错的.以前每次都自己写一个ajax来进行接收调试. 如:用post发送json数据给接口,得到json数据. 工具有时候能让效率大大提升,要学会 ...

  3. PHP微信支付案例收录

    微信支付API 文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1&index=1# TP 微信 + 支 ...

  4. [转帖]TMD为你揭秘中国互联网下半场所有秘密

    https://www.iyiou.com/p/35099.html 李安说,<比利.林恩的中场战事>是“一个成长的故事”.中国互联网也行至中场,下半场如何走,成长的方向在哪里,成当下关键 ...

  5. CnPack实用功能推荐

    已经使用CnPack好几年了,这个插件太好了,现在离开它我都不会写代码了,现在将使用心得与大家分享一下: 1.代码助手非常好用,只需要输入几个字符后,自动出现提示列表,真是懒人的福音呀. 2.代码高亮 ...

  6. Bootstrap媒体对象

    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...

  7. Systemed systemctl 创建服务 详解

    原文:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 一.由来 历史上,Linux 的启动一直采用init进 ...

  8. BZOJ1001[BeiJing2006]狼抓兔子——最小割

    题目描述 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形: ...

  9. BZOJ2120&2453数颜色——线段树套平衡树(treap)+set/带修改莫队

    题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...

  10. 自学Linux Shell19.1-gawk程序基础特性

    点击返回 自学Linux命令行与Shell脚本之路 19.1-gawk程序基础特性 linux世界中最广泛使用的两个命令行编辑器: sed gawk 1. gawk概念 awk是一个强大的文本分析工具 ...