有方向的运动js

<!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.onload=function(){
            var r=4;
            var oLeye=document.getElementById('leye');
            var oReye=document.getElementById('reye');
            document.onmousemove=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>