js穿墙效果
2016-12-08 本文已影响0人
编程师小刘
<style>
*{ margin:0; padding:0; list-style:none;}
ul{ width:200px; height:200px; background:#ccc; float:left; position:relative; overflow:hidden; margin:10px; }
li{ position:absolute; left:0; top:-200px; width:200px; height:200px; background:#6cf; }
</style>
<script src="move.js"></script>
框架代码 ：
function getStyle(obj,sName){
return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
options=options||{};
options.duration=options.duration||700;
options.easing=options.easing||'ease-out';
var start={};
var dis={};
for(var name in json){
start[name]=parseFloat(getStyle(obj,name));
if(isNaN(start[name])){
start[name]=1;
};
dis[name]=json[name]-start[name];
}
var count=Math.floor(options.duration/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function (){
n++;
for(var name in json){
switch(options.easing){
case 'linear':
var cur=start[name]+dis[name]*n/count;
break;
case 'ease-in':
var cur=start[name]+dis[name]*Math.pow(n/count,3);
break;
case 'ease-out':
var cur=start[name]+dis[name]*(1-Math.pow(1-n/count,3));
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter='alpha(opacity:'+cur*100+')';
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete&&options.complete();
}
},30);
}
<script>
function getDir(obj,ev){
var x=obj.offsetLeft+obj.offsetWidth/2-ev.clientX;
var y=obj.offsetTop+obj.offsetHeight/2-ev.clientY;
//Math.atan2(y,x) 角度
//*180/Math.PI 角度转弧度
//+180 变成360
// /90 求数字 0 - 4之间
//Math.round 四舍五入 0 1 2 3 4
// %4 结果 0 1 2 3
return Math.round((Math.atan2(y,x)*180/Math.PI+180)/90)%4;
}
function through(obj){
var oLi=obj.children[0];
obj.onmouseenter=function (ev){
var oEvent=ev||event;
var dir=getDir(obj,oEvent);
switch(dir){
case 0:
oLi.style.left='200px';
oLi.style.top=0;
break;
case 1:
oLi.style.left=0;
oLi.style.top='200px';
break;
case 2:
oLi.style.left='-200px';
oLi.style.top=0;
break;
case 3:
oLi.style.left=0;
oLi.style.top='-200px';
break;
}
move(oLi,{left:0,top:0});
};
obj.onmouseleave=function (ev){
var oEvent=ev||event;
var dir=getDir(obj,oEvent);
switch(dir){
case 0:
move(oLi,{left:200,top:0});
break;
case 1:
move(oLi,{left:0,top:200});
break;
case 2:
move(oLi,{left:-200,top:0});
break;
case 3:
move(oLi,{left:0,top:-200});
break;
}
};
}
window.onload=function (){
var aUl=document.getElementsByTagName('ul');
for(var i=0; i<aUl.length; i++){
through(aUl[i]);
}
};
</script>
</head>
<body>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
