javascript簡寫效果“神秘的眼睛”

2019-11-21 01:48:25

字體：大中小

來源：轉載

供稿：網友

<!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>m.survivalescaperooms.com神秘的眼睛武林網</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   class="iwvjtn8m0"   id="leftEye" class="eye">○<span id="leftPupil" class="pupil">●</span></div> <div   class="iwvjtn8m0"   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需刷新才能執行]

上一篇：js實現的定時關閉頁面或定時提醒效果代碼

下一篇：js判斷一點是否在一個三角形內