function a2d(n){
return n*180/Math.PI;
}
function hoverDir(obj,ev){
var a=ev.clientX-(obj.offsetLeft+obj.offsetWidth/2);
var b=obj.offsetTop+obj.offsetHeight/2-ev.clientY;
return Math.round((a2d(Math.atan2(b,a))+180)/90)%4;
}
function through(obj){
obj.onmouseenter=function(ev){
var oEvent=ev||event;
var oS=this.children[0];
var dir = hoverDir(obj,oEvent);
switch(dir){
case 0:
oS.style.left = '-200px';
oS.style.top = 0;
break;
case 1:
oS.style.left = 0;
oS.style.top = '200px';
break;
case 2:
oS.style.left ='200px';
oS.style.top = 0;
break;
case 3:
oS.style.left = 0;
oS.style.top ='-200px';
break;
}
move(oS,{left:0,top:0},{duration:300,easeing:'linear'});
}
obj.onmouseleave = function(ev){
var oEvent = ev||event;
var oS = this.children[0];
var dir = hoverDir(obj,oEvent);
switch(dir){
case 0:
move(oS,{left:-200,top:0},{duration:300,easing:'linear'});
break;
case 1:
move(oS,{left:0,top:200},{duration:300,easing:'linear'});
break;
case 2:
move(oS,{left:200,top:0},{duration:300,easing:'linear'});
break;
case 3:
move(oS,{left:0,top:-200},{duration:300,easing:'linear'});
break;
}
};
}
window.onload=function(){
var oLi=document.getElementsByTagName("li");
for(var i=0;i<oLi.length;i++){
through(oLi[i])
}
}
前端菜鸟分享：javascript鼠标滑过图片的方向进入透明背景效果