其实没那么复杂, 小朋友问了, 就来一段吧
- [code]<!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="Keywords" content="" />
- <meta name="Description" content="" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes,minimal-ui" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <title>Document</title>
- <style>
- div{width:200px;height:200px;border:1px solid #000;margin:100px auto;text-align:center;line-height:200px;}
- </style>
- </head>
- <body>
- <div></div>
- <script>
- var div=document.querySelector("div"),
- divWidth=div.offsetWidth,
- divHeight=div.offsetHeight,
- arr=["左","上","上","右","右","下","下","左"];
- div.addEventListener("mouseover",function(evt){
- var rect=this.getBoundingClientRect(),
- x=evt.clientX,
- y=evt.clientY;
- div.innerHTML=arr[Math.floor(((Math.atan2(y-rect.top-divHeight/2,x-rect.left-divWidth/2)*180/Math.PI)+180)/45)];
- },false);
- </script>
- </body>
- </html>
- [/code]
代码片段 1
来源: http://www.qdfuns.com/article/11445/492e7d6e6c3b62f7d5cda8825500f297.html