仿265网址导航logo的两只眼睛跟随鼠标移动js实现方法

 
 
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  5. <title>神秘的眼睛跟随鼠标移动</title>
  6. <styletype="text/css">
  7. .eye{
  8. display:inline;
  9. overflow:hidden;
  10. position:relative;
  11. float:left;
  12. margin:50px0050px;
  13. width:50px;
  14. height:50px;
  15. font-size:50px;
  16. line-height:106%;
  17. +line-height:normal;
  18. cursor:default;
  19. }
  20. @mediaalland(min-width:0px){
  21. .eye{line-height:normal;}
  22. }
  23. .pupil{
  24. overflow:hidden;
  25. position:absolute;
  26. margin:-5px00-5px;
  27. width:10px;
  28. height:10px;
  29. line-height:normal;
  30. font-size:10px;
  31. top:50%;
  32. left:50%;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <divid="leftEye"class="eye"><spanid="leftPupil"class="pupil"></span></div>
  38. <divid="rightEye"class="eye"><spanid="rightPupil"class="pupil"></span></div>
  39. <inputname=""id="xy"type="text"/>
  40. <scripttype="text/javascript">
  41. var$=function(o){returndocument.getElementById(o)}
  42. varleftEye=$("leftEye");
  43. varrightEye=$("rightEye");
  44. varleftPupil=$("leftPupil");
  45. varrightPupil=$("rightPupil");
  46. varxy=$("xy");
  47. document.documentElement.onmousemove=function(e){
  48. vare=window.event||e;
  49. vareeX=e.clientX,eeY=e.clientY;
  50. track(leftEye,leftPupil,eX,eY);
  51. track(rightEye,rightPupil,eX,eY);
  52. }
  53. functiontrack(o,i,eX,eY){
  54. varooL=o.offsetLeft;
  55. varooT=o.offsetTop;
  56. varooW=o.offsetWidth;
  57. varooH=o.offsetHeight;
  58. varooCW=o.clientWidth;
  59. varooCH=o.clientHeight;
  60. varoX=oL+oW/2;
  61. varoY=oT+oH/2;
  62. vareXeX=eX-oX;
  63. vareYeY=eY-oY;
  64. vareXY,iL,iT;
  65. if(eX!=0&&eY!=0){
  66. eXeXY=eX/eY;
  67. varr=oCW/2-12;
  68. varR=Math.sqrt(eX*eX+eY*eY);
  69. varrR=R/5>r?r:R/5;
  70. variL=Math.sqrt(rR*rR/(1+1/(eXY*eXY)));
  71. if(eX<0)iL=-iL;
  72. variT=iL/eXY;
  73. i.style.left=(iL+oCW/2)+"px";
  74. i.style.top=(iT+oCH/2)+"px";
  75. }
  76. xy.value=eX+","+eY;
  77. }
  78. </script>
  79. </body>
  80. </html>
  81. 仿265网址导航logo的两只眼睛跟随鼠标移动js实现方法

本文出自 “阿凡达” 博客,请务必保留此出处http://shamrock.blog.51cto.com/2079212/812706

你可能感兴趣的:(logo)