JavaScript imitation Baidu Wall effect

The principle is to judge from the upper and lower left which direction to move into the mask layer from which direction of movement into, from which direction to move out, the mask layer from which the direction of movement slide out.

This is the round angle Radian conversion formula:

Angle-"Radian"
n*pi/180;

Radians-"angle
N*180/PI;

Angle-"direction"
Math.atan2 (y,x)

On JS Code

functiona2d (a) {returnA*180/math.pi;}
Determine the direction of the move infunctionHoverdir (obj,oevent) {varx = Obj.offsetleft+obj.offsetwidth/2-oevent.clientx;vary = obj.offsettop+obj.offsetheight/2-oevent.clienty;returnMath.Round ((A2d (Math.atan2 (y,x)) +180)/90)%4;}functionHovergo (obj) {varOS = obj.children[0]; Obj.onmouseover=function(EV) {varOevent = ev| |event; varOfrom = oevent.fromelement| |Oevent.relatedtarget; if(Obj.contains (Ofrom))return; varDIR =Hoverdir (obj,oevent);
Re-set the mask layer position according to directionSwitch(dir) { Case0: OS.style.left= ' 200px '; OS.style.top= 0;  Break;  Case1: OS.style.left= 0; OS.style.top= ' 200px ';  Break;  Case2: OS.style.left= ' -200px '; OS.style.top= 0;  Break;  Case3: OS.style.left= 0; OS.style.top= ' -200px ';  Break; } startmove (Os,{top:0,left:0});    }; Obj.onmouseout=function(EV) {varOevent = ev| |event; varOTo = oevent.toelement| |Oevent.relatedtarget; if(Obj.contains (OTo))return; varDIR =Hoverdir (obj,oevent);
The corresponding motion is made according to the removed direction mask layerSwitch(dir) { Case0: Startmove (os,{left:200,top:0});  Break;  Case1: Startmove (os,{left:0,top:200});  Break;  Case2: Startmove (os,{left:-200,top:0});  Break;  Case3: Startmove (os,{left:0,top:-200});  Break; }    };} Window.onload=function(){    varOul = document.body.children[0]; varALi =Oul.children;  for(vari=0;i<ali.length;i++) {Hovergo (ali[i]); }};

functionGetStyle (obj,sname) {return(obj.currentstyle| | getComputedStyle (obj,false)) [SName];}
Motion FramefunctionStartmove (obj,json,options) {options=options| |{}; Options.time= options.time| | 700; Options.type= options.type| | ' Ease-out '; varStart = {}; vardis = {};  for(varNameinchJSON) {Start[name]=parsefloat (GetStyle (obj,name)); if(IsNaN (Start[name])) {Switch(name) { Case' Top ': Start[name]=Obj.offsettop;  Break;  Case' Left ': Start[name]=Obj.offsetleft;  Break;  Case' Width ': Start[name]=Obj.offsetwidth;  Break;  Case' Height ': Start[name]=Obj.offsetheight;  Break;  Case' Opacity ': Start[name]= 1;  Break;  Case' BorderWidth ': Start[name]= 0;  Break; }} Dis[name]= json[name]-Start[name]; }    varCount = Math.floor (OPTIONS.TIME/30);varn = 0;    Clearinterval (Obj.timer); Obj.timer= SetInterval (function() {n++;  for(varNameinchJSON) {            Switch(options.type) { Case' Linear ':                    varcur = start[name]+dis[name]*n/count; Break;  Case' Ease-in ':                    varA = N/count;varcur = Start[name]+dis[name]*math.pow (a,3);  Break;  Case' Ease-out ':                    varA = 1-n/count;varcur = start[name]+dis[name]* (1-math.pow (a,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.end&&Options.end (); }    },30);}

<ul>    <Li><span>Module 1</span></Li>    <Li><span>Module 2</span></Li>    <Li><span>Module 3</span></Li>    <Li><span>Module 4</span></Li>    <Li><span>Module 5</span></Li>    <Li><span>Module 6</span></Li></ul>

*{margin:0;padding:0;}ul{Overflow:Hidden;width:630px;margin:100px Auto;}Li{width:200px;Height:200px;background:#ccc;font-size:30px;Font-weight:Bold;Line-height:200px;Overflow:Hidden;float: Left;margin:5px;position:relative;Top:0; Left:0;}Li Span{position:Absolute;Top:0; Left:-200px;width:100%;Height:100%;background:Red;Opacity:0.4;Filter:Alpha (OPACITY:40);}

JavaScript imitation Baidu Wall effect