javascript简写效果“神秘的眼睛”

<!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=gb2312" /> <title>www.jb51.net神秘的眼睛脚本之家</title> <style type="text/css"> .eye{     display:inline;     overflow:hidden;     position:relative;     float:left;     margin:50px 0 0 50px;     width:50px;     height:50px;     font-size:50px;     line-height:106%;     +line-height:normal;     cursor:default; } @media all and (min-width:0px){ .eye{line-height:normal;} } .pupil{     overflow:hidden;     position:absolute;     margin:-5px 0 0 -5px;     width:10px;     height:10px;     line-height:normal;     font-size:10px;     top:50%;     left:50%; } </style> </head> <body> <div id="leftEye" class="eye">○<span id="leftPupil" class="pupil">●</span></div> <div id="rightEye" class="eye">○<span id="rightPupil" class="pupil">●</span></div> <input name="" id="xy" type="text" /> <script type="text/javascript"> var $=function(o){return document.getElementById(o)} var leftEye=$("leftEye"); var rightEye=$("rightEye"); var leftPupil=$("leftPupil"); var rightPupil=$("rightPupil"); var xy=$("xy"); document.documentElement.onmousemove=function(e){     var e=window.event||e;     var eX=e.clientX, eY=e.clientY;     track(leftEye,leftPupil,eX,eY);     track(rightEye,rightPupil,eX,eY); } function track(o,i,eX,eY){     var oL=o.offsetLeft;     var oT=o.offsetTop;     var oW=o.offsetWidth;     var oH=o.offsetHeight;     var oCW=o.clientWidth;     var oCH=o.clientHeight;     var oX=oL+oW/2;     var oY=oT+oH/2;     var eX=eX-oX;     var eY=eY-oY;     var eXY,iL,iT;     if(eX!=0&&eY!=0){         eXY=eX/eY;         var r=oCW/2-12;         var R=Math.sqrt(eX*eX+eY*eY);         var rR=R/5>r?r:R/5;         var iL=Math.sqrt(rR*rR/(1+1/(eXY*eXY)));         if(eX<0)iL=-iL;         var iT=iL/eXY;         i.style.left=(iL+oCW/2)+"px";         i.style.top=(iT+oCH/2)+"px";     }     xy.value=eX+","+eY; } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

javascript简写效果“神秘的眼睛”

您可能感兴趣的文章: