???????????????????????????
??? ???????????????????????<!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> ???????????????
???????????????????<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> ???????????????
有方向的运动js
原文地址：https://www.cnblogs.com/zhchoutai/p/8615100.html