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

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

<!DOCTYPE html>
<html>
<head>
    <title>eye</title>
    <script src="eye.js" type="text/javascript"></script>
<style>
    #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;}
</style>
</head>
<body>
<div>
    <img src="eye.JPG"  id="leftEye" />
    <img src="eye.JPG" id="rightEye" />
    <img src="ball.JPG" width="14" height="14" id="leftBall" />
    <img src="ball.JPG" width="14" height="14" id="rightBall" />

</div>
<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>

</body>
</html>

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;
}

图像文件如下：

眼眶：眼珠：

1楼suannai03143小时前: 您的文章已被推荐到博客首页和个人页侧边栏推荐文章，感谢您的分享。