Day38-javascript Foundation of motion-uniform motion

Career development, code 100 days--2018-04-23

I. BASIC framework of movement

The motion of JavaScript can be broadly understood as the gradient effect, the direct movement effect, etc., the common "share to", the banner, the transparency change and so on on the graph webpage. The basic way to achieve this is to use the timer that you learned earlier.

Through the study, summarizes the basic movement realization--the motion frame.

The motion framework can be understood as the process of implementing element motions. For example, to make a div box move, that is, to add a timer to its left style.

<type= "button"  value= "Start Motion"  ID= "BTN"  >    <ID= "Div1"></Div  >

<script type= "Text/javascript" >varTimer =NULL; Window.onload=function () {        varSpeed =6;//Set Move SpeedvarOdiv = document.getElementById (' Div1 ')); varOBTN = document.getElementById (' btn ')); Obtn.onclick=function() {clearinterval (timer); Before exercising need to close other so timers timer= SetInterval (function(){                if(odiv.offsetleft>300) {//move clearinterval (timer) within the specified range; }ElseODiv.style.left= odiv.offsetleft+speed+ "px"; },200); }    }</script>

Attention:

1, when the realization of the movement, often to set a velocity variable speed, used to control the movement speed of the object.

2, here can achieve within the specified range of movement, but there is a moving problem, according to the distance = speed x time, often does not exactly in the specified position stop. So you need to set the stop condition.

3, if the button event-the beginning of the movement, the continuous click "Start Motion", if not off the other timers, div box will be more and more quickly, this does not meet the design requirements. So you need to add it before you move.

Clearinterval (timer);

4, the fixed speed of the movement mode can become uniform motion.
5. The realization of motion requires absolute positioning of the object. Position:absolute;top:0;left0;


Second, the application case

2.1 Page " share to" "Feedback" and other sidebar effects.

When the mouse moves to the "share to" area, the div box sticks out to the left, moving the mouse back to its original position.

Based on the analysis of the front-facing motion framework, we also need to write a motion frame to place it in the mouse onmouseover and onmouseout events.

CSS style settings:

*{margin:0;padding:0;}

#div1{width:160px;Height:260px;background:#666;position:Absolute;Top:200px; Left:-160px;}#div1 span{width:20px;Height:60px;font-size:12px;Color:#fff;background:Blue;Line-height:20px;position:Absolute; Left:160px;Top:120px;}

        //Move left        functionstartMove1 () {varOdiv = document.getElementById ("Div1");            Clearinterval (timer); Timer= SetInterval (function(){                if(odiv.offsetleft==0) {clearinterval (timer); }Else{odiv.style.left= odiv.offsetleft+10+ "px"; }            },200); }            //Move Right            functionstartMove2 () {varOdiv = document.getElementById ("Div1");                Clearinterval (timer); Timer= SetInterval (function(){                    if(odiv.offsetleft==160) {clearinterval (timer); }Else{odiv.style.left= odiv.offsetleft-10+ "px"; }                },200); }

Then add an event to the mouse event

var odiv = document.getElementById ("Div1");                         // mouse move in              function () {                  startMove1 ();              };               // Mouse move out              function () {                  startMove2 ();              };

This enables the move-out movement of the sidebar.

But this does not mean that the code, observing the "left" and "right Shift" codes, is highly similar, except that the "offset" and "moving speed" are the only differences. Therefore, the two implementations can be considered for optimization by means of the parameters of the communication.

Increase parameter 1:itarget target position; parameter 2:speed move speed

 varTimer =NULL;//Setting the timer variable        varSpeed = 10;//Set the speed variable        functionStartmove (itarget,speed) {varOdiv = document.getElementById ("Div1");            Clearinterval (timer); Timer= SetInterval (function(){                if(odiv.offsetleft==itarget)                {clearinterval (timer); }Else{odiv.style.left= odiv.offsetleft+speed+ "px"; }            },200); }

             // mouse move in              function () {                  //  startMove1 ();                  Startmove (0,10);              };               // Mouse move out              function () {                  //  startMove2 ();                  Startmove ( -160,-10);              };

In this way, it can satisfy the basic functional effect and can optimize the code in a lot.

Day38-javascript Foundation of motion-uniform motion