Javascript Learning Note Uniform motion--Application case: Website common function share to

The motion of JavaScript is often used on the website, this time to share some basic applications of sports. It is convenient for you to use directly in the development.

The code is easy to understand and suitable for beginners. At the end of the day, a set of their own motion framework will be arranged step by step.

Application Case:

Move the mouse over the share and the left Div will be displayed. Move the meeting yourself to recover. Believe this everyone will use very useful, the following see how the code is implemented.

<style type= "Text/css" > #div1{width:150px;Height:200px;background:Green;position:Absolute; Left:-150px; }#div1 span{position:Absolute;width:20px;Height:60px;Line-height:20px;background:Blue; Right:-20px;Top:70px; }</style>

< Body >        <  ID= "Div1">            <span>                 Share to             </span>        </div>     </body>

Here's the JavaScript code

<Scripttype= "Text/javascript">window.onload=function(){                varOdiv=document.getElementById ("Div1"); Odiv.onmouseover=function() {Startmove (0);                                }; Odiv.onmouseout=function() {Startmove (- Max);            }; }                        var Time=NULL; functionStartmove (itraget) {varOdiv=document.getElementById ("Div1");                                Clearinterval (time); time=SetInterval (function(){                    var Speed=0; if(Odiv.offsetleft>itraget) { speed=-Ten; }Else{ speed=Ten; }                                        if(Odiv.offsetleft==itraget)                    {clearinterval (time); }Else{oDiv.style.left=Odiv.offsetleft+ Speed+'px'; }                }, -); }        </Script>

Ideas:

The initial left in the style is-150 so the div is indented inside, giving 0 is displayed. So we just have to change this value.

The parameter ITarget in Startmove is the target point, indicating which target point will stop.

controlling speed can control how fast the movement is. Stop the timer if the target point is reached.

Law:

* Hypothesis

* Left:30 itarget:300 to right
* left:600 itarget:50 to the left for negative
*
* ITarget infer the positive and negative of the velocity by the relationship between left and Target point at the current position

Note: The timer will be turned off as soon as it is moved to share, it will open a timer, the more open the more relatively faster, because at the same time more than one timer to execute.

So always make sure a timer works.

Follow: function function, the fewer parameters the better principle, so according to the above law, speed is not passed as a parameter.

Take a life example: You take a taxi, tell the taxi driver has 100 yards of speed to where, is generally impossible. You can't tell Shifu how fast you're going to run.

So the procedure is the same, and here the speed of the transfer parameter is removed.

Of course, there will be a lot of problems in the current framework, which will be solved in succession.

Javascript Learning Note Uniform motion--Application case: Website common function share to