Use native JS to write mobile animation case and practical application

JS is very strong believe that many people know, then what is the strength of it? Interested people can go to check, here will not repeat, because not in the scope of this article discussion.

What we're talking about is how to use native JS to write motion animations? Let's start with one of the simplest animated examples, many sites have a shared box on the left or right side, and the mouse is also moved out of a list, which is the address to share. The mouse moves away, it moves in.

What do you do to achieve this effect?

Can think of, the mouse through and the mouse left very good understanding with the OnMouseMove event and onmouseout event can be completed.

What about moving the animation? We can think about it one step at a

First of all, this is the beginning.

This is done after the completion of the move (only the contents of the case can be written on their own)

So how do you do it from the beginning? We first use absolute positioning, and then write negative numbers to the left value. This completes the initial.

Position:absolute;             -200px;            top:0px;

And how do we get him to move? Animations in Flash are made up of frames, and each frame moves a little to form a full, continuous animation.

In the same vein, we know that there is setinterval in JS which is the function that executes once every few seconds. SetInterval (a,2000); Executes a function once every 2 seconds.

Then we move 10 pixels to the right every 40 milliseconds. This seems to be a continuous movement.

Window.onload=function(){            varLeft_yd =document.getelementbyid ("Left_yidong"); Left_yd.onmousemove=function(){//Mouse over EventsDonghua (0,10,40);//(Stop lefts for how many pixels, 40 for every 40 milliseconds, 10 for each move 10 pixels, control speed) note here the value of lefts is 0} left_yd.onmouseout=function(){//Mouse Leave eventDonghua ( -200,-10,40);//Note that the value of lefts here is the left value of the Left_yidong box. Here is -200px            }        }; //The following functions should not be arbitrarily altered to avoid errors.         vartimes=NULL; functionDonghua (lefts,speen,time) {//(stop at how many pixels are lefts, and control speed is performed once every time millisecond)Clearinterval (times);//Stop Times            varLeft_yd =document.getelementbyid ("Left_yidong"); Times=setinterval (function(){                if(left_yd.offsetleft==lefts)                {clearinterval (times); }Else{left_yd.style.left=left_yd.offsetleft+speen+ ' px ';        }},time); }

In this case the animation is finished, note that the ID name is changed to its own.

But this kind of animation is constant speed, I personally do not like very much, I want to do a more slow motion animation how to do?

It's simple, the value of the pixel that is moved each time is reduced is the Speen value of the above code

1Window.onload=function(){2             varLeft_yd =document.getelementbyid ("Left_yidong");3Left_yd.onmousemove=function(){//Mouse over Events4Donghua (0,40);//(Stop lefts for how many pixels, 40 for every 40 milliseconds, control speed) note here the value of lefts is 05             }6left_yd.onmouseout=function(){//Mouse Leave event7Donghua ( -200,40);//Note that the value of lefts here is the left value of the Left_yidong box. Here is -200px8             }9         };Ten         //The following functions should not be arbitrarily altered to avoid errors.  One         vartimes=NULL; A         functionDonghua (lefts,time) {//(stop at how many pixels are lefts, and control speed is performed once every time millisecond) - clearinterval (times); -             varLeft_yd =document.getelementbyid ("Left_yidong"); theTimes=setinterval (function(){ -                 varspeen= (lefts-left_yd.offsetleft)/20; The target value minus the current value is 20, and the control speed is fast and slow. -Speen=speen>0? Math.ceil (Speen): Math.floor (Speen);//Speen The judgment and rounding up or down -                 if(left_yd.offsetleft==lefts) +                 { - clearinterval (times); +}Else { Aleft_yd.style.left=left_yd.offsetleft+speen+ ' px '; at                 } - },time); -}

The new 16th, 17 lines of code is completed, the 16th line is used to change the value of the Speen, and the 17th line is used to take the whole, otherwise there will be decimals, resulting in incorrect location errors.

Take a look at the whole code: (Don't mind if the style doesn't look good)

1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style>7 #left_yidong {8 width:200px;9 height:500px;Tenbackground-color: #a6e1ec; Oneborder-radius:5px; A Position:absolute; -Left:-200px; - top:0px; the         } - #left_function { - width:30px; - height:50px; +background-color: #46b8da; -border-radius:2px; +text-Align:center; Aline-height:25px; at Position:absolute; - left:200px; - top:200px; -         } -</style> -<script> inWindow.onload=function(){ -             varLeft_yd =document.getelementbyid ("Left_yidong"); toLeft_yd.onmousemove=function(){//Mouse over Events +Donghua (0,40);//(Stop lefts for how many pixels, 40 for every 40 milliseconds, control speed) note here the value of lefts is 0 -             } theleft_yd.onmouseout=function(){//Mouse Leave event *Donghua ( -200,40);//Note that the value of lefts here is the left value of the Left_yidong box. Here is -200px $             }Panax Notoginseng         }; -         //The following functions should not be arbitrarily altered to avoid errors.  the         vartimes=NULL; +         functionDonghua (lefts,time) {//(stop at how many pixels are lefts, and control speed is performed once every time millisecond) A clearinterval (times); the             varLeft_yd =document.getelementbyid ("Left_yidong"); +Times=setinterval (function(){ -                 varSpeen= (lefts-left_yd.offsetleft)/20;//target value minus current value and then 20, control speed first fast and slow $Speen=speen>0? Math.ceil (Speen): Math.floor (Speen);//Speen The judgment and rounding up or down $                 if(left_yd.offsetleft==lefts) -                 { - clearinterval (times); the}Else { -left_yd.style.left=left_yd.offsetleft+speen+ ' px ';Wuyi                 } the },time); -         } Wu</script> - About<body> $<div id= "Left_yidong" > -<p> Insert the content you want here </p> -<p> Insert the content you want here </p> -<p> Insert the content you want here </p> A<p> Insert the content you want here </p> +<p> Insert the content you want here </p> the<div id= "Left_function" > Share </div> -</div> $</body> the
Practical application:
Below we apply the above technology to the actual case:
At the beginning of the login box at the top of the entire page, open the interface after the login box slowly removed. is to change the top from left to right from top to bottom.
1Window.onload=function(){2         varONLD =document.getelementbyid ("onld");3LOD (70);4         vartimes=NULL;5         functionLod (top) {6 clearinterval (times);7             varONLD =document.getelementbyid ("onld");8Times=setinterval (function(){9                 varspeen= (top-onld.offsettop)/20;TenSpeen=speen>0?Math.ceil (Speen): Math.floor (Speen); One                 if(onld.offsettop==top) A                 { - clearinterval (times); -}Else { theonld.style.top=onld.offsettop+speen+ ' px '; -                 } -},50) -         } +     } -}
In the practical application, I wrote the time to die in the function for the convenience, because this function is used only once in my project, there is no problem of the code reuse, in order to reduce the code to write dead in the function directly.
The most important change to this practical application and the above case is to change the offsetleft to offsettop. As to what offsetleft and offsettop mean, look at this picture below. (This figure from Baidu know)
If you have any questions or suggestions or loopholes and errors, please feel free to contact me.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　--Leng
———————————————————————————————————————————————————————————————————————————————
Please specify the source and author of the reprint. Thank you for your cooperation
--Leng
Use native JS to write mobile animation case and practical application