javascript特效：会随着鼠标而动的眼睛

这个特效非常简单，其中眼球和眼珠都是特定的图片。只要掌握好距离坐标就没问题。我就直接贴代码，有兴趣的朋友可以自己复制下来运行一下，下面的眼睛图像就是我的文件用到的图像，比较难看.。我就把我的代码贴出来好了。

其中的html文件如下：

<!DOCTYPE html>
<html>
<head>
    <title>eye</title>
    <script src="eye.js" type="text/javascript"></script>
<style>
    div.img { background:url("../bgcolor.jpg") no-repeat; left:67px; top:7px; position:relative;}
    :root body div.img {background:url("../bgcolor.jpg") no-repeat; left:67px; top:0px; position:relative;}
    div.img p { width:250px; height:150px;}
    #leftBall,#leftEye,#rightBall,#rightBall1,#rightBall2,#rightBall3,#rightBall4,#rightBall6,#rightBall5,#rightEye {float: left;position: absolute;}
    #leftEye{left:130px;top:200px;}
    #leftBall{left:150px;top:230px;}
    #rightBall1{left:370px;top:230px;}
    #rightBall2{left:370px;top:230px;}
    #rightBall3{left:370px;top:230px;}
    #rightBall4{left:370px;top:230px;}
    #rightBall5{left:370px;top:230px;}
    #rightBall6{left:370px;top:230px;}
    #rightBall{left:350px;top:230px;}
    #rightEye{left: 330px;top:200px;}
    a {text-decoration:none; font-size:50px; margin-left: 20px;}
    a:visited{color:green;}
    a:link {color:blue;}
    a:hover {color:red;}
    a:active {color:white;}

</style>
</head>
<body>
<img src="ball.JPG" width="14" height="14" id="rightBall1"  /><img src="ball.JPG" width="14" height="14" id="rightBall2" /><img src="ball.JPG" width="14" height="14" id="rightBall3" />
<img src="ball.JPG" width="14" height="14" id="rightBall4" /><img src="ball.JP
G" width="14" height="14" id="rightBall5" /><img src="ball.JPG" width="14" height="14" id="rightBall6" />
<div id="rewrite"><h1 id="biaoTi"></h1><br />24 display:<input type="radio" name="radico"/>YES   <input type="radio" name="radico" checked="checked"/>NO</div>
<marquee direction="">wohui yi dong</marquee>
<div class="img"><p></p></div></body>
<div>
    <img src="../e.png"  id="leftEye" />
    <img src="../e.png" id="rightEye" />
    <img src="ball.JPG" width="14" height="14" id="leftBall" />
    <img src="ball.JPG" width="14" height="14" id="rightBall" />
    <a href="http://www.baidu.com/" >baidu.com</a>
</div>
</html>

其中的JS文件如下：eye.js

/**
 * Created with JetBrains WebStorm.
 * User: Administrator
 * Date: 13-9-5
 * Time: 下午4:25
 * To change this template use File | Settings | File Templates.
 */

window.onload=dateday;
document.onmousemove=moveHandle;
var tempx=new Array;
var tempy=new Array;
var i=0;
function moveHandle(evt){
      if(!evt)
        evt=window.event;

    makeMouseMove(evt.clientX,evt.clientY);
}
function makeMouseMove(xPos,yPos){
   tempx[i]=xPos;
   tempy[i]=yPos;
   i++;
   if(i==20){
       var k=0;
       for(var j=1;j<=6;j++){
           mouseMove(j,tempx[k],tempy[k]);
           k+=3
       }
       i=0;
   }
   eyeMove(xPos,yPos);
}
function eyeMove(xPos,yPos){
    var leftBall=document.getElementById("leftBall").style;
    var rightBall=document.getElementById("rightBall").style;
    leftBall.left=eyeFoll(xPos,130);
    leftBall.top=eyeFoll(yPos,200);
    rightBall.left=eyeFoll(xPos,330);
    rightBall.top=eyeFoll(yPos,200);
    function eyeFoll(currPos,eyePos){
        return Math.min(Math.max(currPos,eyePos+3),eyePos+60)+"px";
    }
}
function mouseMove(i,xPos,yPos){

    var rightBall=document.getElementById("rightBall"+i).style;

    rightBall.left=mouseFoll(xPos,330);
    rightBall.top=mouseFoll(yPos,200);
    function mouseFoll(currPos,eyePos){
        return currPos+"px";
    }

}

function dateday(){
    var date=new Date();var hour;var min=date.getMinutes();var second=date.getSeconds();var houzui="";
    if(second<10)second = "0"+second;
    if(show24()||date.getHours()<13){
         hour= date.getHours();
    }
    if(show24()==false){
        if(date.getHours()>12){
            hour= date.getHours()-12;houzui=" PM";
        }
        else{
            hour= date.getHours();houzui=" AM";
        }
    }
    var temp=Math.floor((date.getTime())/(1000*60*60));min=Math.floor((date.getTime()-temp*60*1000*60)/(1000*60));second=Math.floor((date.getTime()-temp*60*60*1000-min*1000*60)/1000);
    document.getElementById("biaoTi").innerHTML="BeiJing Time: "+hour+":"+min+":"+second+houzui;
    setTimeout(dateday,1000)
}
function show24(){
    return document.getElementsByName("radico")[0].checked;
}

其中用到了三张图片，分别是：

背景图片：

眼眶：（PNG格式）

眼珠：

将上面三幅图下载下来，对照好html文件中的图片路径设置好，就可以运行了。js文件路径也要设置好，一般将他们放在同一个文件夹下，在href中就可以直接输入图片名称就可以了！