页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容 js鼠标控制眼睛

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

发布：dxy 字体：[增加减小] 类型：转载

“眼睛跟随鼠标转动效果”—— 265.com 把它放在网页的LOGO里，用javascript来实现，这个创意不错！以前刚做FLASH的时候，用AS1实现过，今天下班早，在家简写了个：

点击运行可以看到效果:

<!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>www.jb51.net神秘的眼睛脚本之家</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 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 全选提示:你可先修改部分代码,再按运行]