- <!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>神秘的眼睛跟随鼠标移动</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 eeX=e.clientX, eeY=e.clientY;
- track(leftEye,leftPupil,eX,eY);
- track(rightEye,rightPupil,eX,eY);
- }
- function track(o,i,eX,eY){
- var ooL=o.offsetLeft;
- var ooT=o.offsetTop;
- var ooW=o.offsetWidth;
- var ooH=o.offsetHeight;
- var ooCW=o.clientWidth;
- var ooCH=o.clientHeight;
- var oX=oL+oW/2;
- var oY=oT+oH/2;
- var eXeX=eX-oX;
- var eYeY=eY-oY;
- var eXY,iL,iT;
- if(eX!=0&&eY!=0){
- eXeXY=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>
本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/812706