<!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>