有方向的运动js

最新推荐文章于 2019-10-24 23:05:33 发布

jsonW

最新推荐文章于 2019-10-24 23:05:33 发布

阅读量805

点赞数

分类专栏： javascript知识点

本文链接：https://blog.youkuaiyun.com/qq_21773607/article/details/47778197

版权

javascript知识点专栏收录该内容

11 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>derective sport</title>
   <style type="text/css">
       #eyes{width:200px;height:300px;position: absolute;left:500px;top:200px;text-align: center;background:url(../images/eye.png) no-repeat;}
       #leye{border:2px solid blue;position: absolute;left:115px;top:41px;border-radius: 50%;}
       #reye{border:2px solid blue;position: absolute;left:135px;top:41px;border-radius: 50%;}
   </style>
   <script type="text/javascript">
       window.οnlοad=function(){
           var r=4;
           var oLeye=document.getElementById('leye');
           var oReye=document.getElementById('reye');
           document.οnmοusemοve=function(ev){
               var ev=ev||event;

               sport(oLeye,115,41);
               sport(oReye,135,41);

               function sport(obj,L,T){
                   var a=ev.clientY-(obj.offsetTop+obj.parentNode.offsetTop);
                   var b=ev.clientX-(obj.offsetLeft+obj.parentNode.offsetLeft);
                   var sportX=Math.sin(Math.atan2(b,a))*r;
                   var sportY=Math.cos(Math.atan2(b,a))*r;
                   obj.style.left=L+sportX+'px';
                   obj.style.top=T+sportY+'px';
               }
           }
       }

   </script>
</head>
<body>
   <div id="eyes">
       <span id="leye"></span>
       <span id="reye"></span>
   </div>
</body>
</html>