google眼睛的实现
没事写的.
js实现眼睛随鼠标运动.就是眼睛一直盯着鼠标看.
图片:
pupil:
?? ? ? eye-r:
? ? ?eye-y:
?
就是三图片. ?我写的时候用的是gif格式的.但是传到巴巴变相册之后好像变成了jpg.但问题不大.
?
效果图:
代码：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript眼睛</title><style>body{height:1000px;}</style><script> var eye1_X=0; var eye1_Y=0; var eye2_X=0; var eye2_Y=0; var R=43; function getCenter(){ eye1_X=document.getElementById("eyeborder1").offsetLeft+document.getElementById("eyeborder1").offsetWidth/2-7; eye1_Y=59; eye2_X=document.getElementById("eyeborder2").offsetLeft+document.getElementById("eyeborder2").offsetWidth/2-7; eye2_Y=59; document.getElementById("eye1_id").style.posTop=eye1_Y; document.getElementById("eye1_id").style.posLeft=eye1_X; document.getElementById("eye2_id").style.posTop=eye2_Y; document.getElementById("eye2_id").style.posLeft=eye2_X; } function moveEye(event){ //得到眼框的中心 /* var eye1_X=379;var eye1_Y=58; var eye2_X=495;var eye2_Y=58;*/ eye1_X=document.getElementById("eyeborder1").offsetLeft+document.getElementById("eyeborder1").offsetWidth/2-7; eye1_Y=59; eye2_X=document.getElementById("eyeborder2").offsetLeft+document.getElementById("eyeborder2").offsetWidth/2-7; eye2_Y=59; //鼠标位置判断 var r1=Math.sqrt((event.clientX-eye1_X)*(event.clientX-eye1_X)+(event.clientY-eye1_Y)*(event.clientY-eye1_Y)); if(r1<R){//鼠标在圆1内部 document.getElementById("eye1_id").style.posTop=event.clientY; document.getElementById("eye1_id").style.posLeft=event.clientX; }else{ document.getElementById("eye1_id").style.posLeft=R*(event.clientX-eye1_X)/r1+eye1_X; document.getElementById("eye1_id").style.posTop=R*(event.clientY-eye1_Y)/r1+eye1_Y; } var r2=Math.sqrt((event.clientX-eye2_X)*(event.clientX-eye2_X)+(event.clientY-eye2_Y)*(event.clientY-eye2_Y)); if(r2<R){//鼠标在圆2内部 document.getElementById("eye2_id").style.posTop=event.clientY; document.getElementById("eye2_id").style.posLeft=event.clientX; }else{ document.getElementById("eye2_id").style.posLeft=R*(event.clientX-eye2_X)/r2+eye2_X; document.getElementById("eye2_id").style.posTop=R*(event.clientY-eye2_Y)/r2+eye2_Y; } }</script></head><body id="mybody" onmousemove="moveEye(event)" onload="getCenter()"><div id="eyeborder"><center><img id="eyeborder1" src="eye-r.gif"><img id="eyeborder2" src="eye-y.gif"/></center></div><div id="text_id"></div><div style="position:absolute;" id="eye1_id"><img src="pupil.gif"></div><div style="position:absolute;" id="eye2_id"><img src="pupil.gif"></div></body></html>