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