zoukankan      html  css  js  c++  java
  • javascript 获取鼠标在盒子中的坐标

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     <style media="screen">
     9         .box {
    10             width: 300px;
    11             height: 200px;
    12             padding-top: 100px;
    13             margin: 100px;
    14             font: 18px/1.5 "simsun";
    15             background-color: lemonchiffon;
    16             text-align: center;
    17             cursor: pointer;
    18         }
    19     </style>
    20 </head>
    21 <body>
    22     <div class="box"></div>
    23 
    24     <script src="animate.js" charset="utf-8"></script>
    25     <script type="text/javascript">
    26         var div = document.getElementsByTagName("div")[0];
    27         div.onmousemove = function(event){
    28             event = event || window.event;
    29 
    30             var pagex = event.pageX || scroll().left + event.clientX;
    31             var pagey = event.pageY || scroll().top + event.clientY;
    32 
    33             var divx = div.offsetLeft;
    34             var divy = div.offsetTop;
    35 
    36             var targetx = pagex - divx;
    37             var targety = pagey - divy;
    38 
    39             this.innerHTML = "鼠标在盒子中的X坐标:" + targetx + "px;<br />" + "鼠标在盒子中的Y坐标:" + targety + "px;";
    40         }
    41     </script>
    42 </body>
    43 </html>
    你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。
  • 相关阅读:
    菜鸟浅谈软件开发项目管理
    中国准货币体系的概要简析
    使用dockercompose安装wordpress
    货币乘数
    安全测试的相关内容
    TCP三次握手和四次挥手
    HTTP协议相关
    描述浏览器登录的过程
    AJAX相关知识
    什么是热钱
  • 原文地址:https://www.cnblogs.com/knuzy/p/8869070.html
Copyright © 2011-2022 走看看