仿265眼珠随页面光标而在眼眶范围内滚动

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

仿265眼珠随页面光标而在眼眶范围内滚动
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111com.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>仿265眼珠随页面光标而在眼眶范围内滚动</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
*{margin:0;padding:0;}
.mbox{background:transparent url(/100622/1_100622134201_1.gif) no-repeat scroll left top;position:relative;border:1px solid #ff0000;margin:0 auto;}
.mbox span{background-color:#000;font-size:0;display:block;overflow:hidden;position:absolute;}
</style>
</head>
<body>
<div style=""></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=""></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>

提示：您可以先修改部分代码再运行

仿265眼珠随页面光标而在眼眶范围内滚动

相关文章

精彩推荐