<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>www.jb51.net mystical eyes cloud Habitat Community </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> </pead> <body> <div id= "Lefteye" class= "Eye" >0<span id= "Leftpupil" class= "pupil" > </span></div> <div id= "Righteye" class= "Eye" >0<span id= "Rightpupil" class= "pupil" > </span></div> <input name= "" id= "XY" type= "text"/> <script type= "Text/javascript" > var $=function (o) {return document.get Elementbyid (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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
