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

2020-11-27 来源：乌哈旅游

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.gxlcms.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> 
○● 
○● 
<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简写效果“神秘的眼睛”_javascript技巧