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中就可以直接输入图片名称就可以了！