眼珠会跟随鼠标的光标在眼眶范围内滚动，感觉就像眼珠一直盯着鼠标的操作...
以下讨论的是和眼球相关的跟随鼠标转动的眼球效果特效 教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：
[code]<!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>眼珠随页面光标而在眼眶范围内滚动</title>
<style type="text/css">
*{margin:0;padding:0;}
.mbox{background:transparent url(http://www.itref.cn/uploads/allimg/100622/1_100622134201_1.gif) no-repeat scroll left top;width:150px;height:50px;position:relative;border:1px solid #FF0000;margin:0 auto;}
.mbox span{background-color:#000;font-size:0;display:block;width:3px;height:3px;overflow:hidden;position:absolute;}
</style>
</head>
<body>
<div style="height:100px;"></div>
<div id="mbox" class="mbox">
<span style="left:105.5px;top:23.5px;"></span>
<span style="left:125.5px;top:23.5px;"></span>
</div>
<div style="height:500px;"></div>
<script type="text/javascript">
function getPos(obj){
var p={};
p.x=obj.offsetLeft;
p.y=obj.offsetTop;
while(obj=obj.offsetParent){
p.x+=obj.offsetLeft;
p.y+=obj.offsetTop;
}
return p;
}
function each(objs,f){
for(var i=0;i<objs.length;i++)f(i);
}
function act(){
var eyes=document.getElementById('mbox').getElementsByTagName('span');
var cr=10;
var pr=1.5;
var of=150;
var cssp=[];
cssp[0]={x:105.5,y:23.5};
cssp[1]={x:125.5,y:23.5};
var np=[];
each(eyes,function(i){
var p=getPos(eyes[i]);
p.x+=pr;
p.y+=pr;
np[i]=p;
});
document.getElementsByTagName('body')[0].onmousemove=function(e){
var e=e||window.event;
var mp={x:e.clientX,y:e.clientY};
each(eyes,function(i){
var p=track(mp,np[i]);
p.x+=cssp[i].x-pr;
p.y+=cssp[i].y-pr;
eyes[i].style.left=p.x+"px";
eyes[i].style.top=p.y+"px";
});
}
function track(m,n){
var p={x:0,y:0}
lf=m.x-n.x;
t=m.y-n.y;
var tmp=cr;
tmp*=longRate(lf,t);
p.x=lf/Math.abs(lf)*Math.sqrt(tmp*tmp/(1+t*t/(lf*lf)));
p.y=t/Math.abs(t)*Math.sqrt(tmp*tmp/(1+lf*lf/(t*t)));
return p;
}
function longRate(lf,t){
var tmp=Math.sqrt(lf*lf+t*t);
var rate=1;
if(tmp>=of){
rate=1;
}else if(tmp<=pr){
rate=0;
}else{
rate=tmp*pr/of;
rate=rate>1?1:rate;
}
return rate;
}
}
act();
</script>
</body>
</html>[/code]
gongle的小工具——眼睛，以及265导航页logo中的眼睛，都是通过javascript来实现的。当鼠标在页面中滑动时，眼珠会跟随鼠标的光标在眼眶范围内滚动，感觉就像眼珠一直盯着鼠标的操作。
其中很关键的部分是算法，这个需要我们具备一些数学上的几何知识。
• 直角三角形三边符合：直角边1的平方+直角边2的平方=斜边的平方，如果对直角边、斜边不明白，也可以这样理解，短边1的平方+短边2的平方=长边的平方
• 相似的两个三角形临近两边之比相等
关于跟随鼠标转动的眼球效果特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010062560019.shtml方便下次再访问哦。