javascript奇效：会随着鼠标而动的眼睛
日期：2014-05-16 浏览次数：20364 次
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;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
