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>

 

posted @ 2018-04-17 19:24  叶子玉  阅读(1082)  评论(0)  编辑  收藏  举报