A brief discussion on how Javascript achieves uniform motion

Sports in Javascript are often used on websites. This time I would like to share with you some basic applications of motion. It is convenient for everyone to use it directly during development.

The code is simple and easy to understand, suitable for beginners. Finally, I will sort out my own movement framework step by step.

Application case renderings:

Move the mouse over the share, and the div on the left will be displayed. It will restore itself if you remove it. I believe everyone will use this. It is very practical. Let’s take a look at how the code is implemented.

Copy code The code is as follows: #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; }

Copy code The code is as follows: Share to

The following is the Javascript code

Copy code

The code is as follows: window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-150); }; } var time=null; function startMove(iTraget){ var oDiv=document.getElementById("div1"); clearInterval(time); time=setInterval(function(){ var speed=0; if(oDiv.offsetLeft>iTraget){ speed=-10; }else{ speed=10; } if(oDiv.offsetLeft==iTraget){ clearInterval(time); }else{ oDiv.style.left=oDiv.offsetLeft speed 'px'; } },30); } Things:

The initial left in the style is -150, so that the div will shrink inside, and if it is 0, it will be displayed. Then we just need to change this value

The parameter iTarget in startMove is the target point, indicating which target point it will stop at.

Control the size of speed to control the speed of movement. If the target point is reached, stop the timer.

Rule:

* Assumption

* left:30 iTarget:300 It turns out that going to the right is positive * left:600 iTarget:50 It turns out that going to the left is negative * * Infer the positive and negative speed through the relationship between the current position left and the target point iTarget

Note: You need to turn off the timer at the beginning, because every time you move to share, a timer will be turned on. The more you turn on, the faster it will be because multiple timers will be executed at the same time.

So make sure a timer works every time.

Follow the principle: the function functions are the same, the fewer parameters the better, so according to the above rules, speed is not passed in as a parameter.

To give you an example in life: when you take a taxi, it is generally impossible to tell the taxi driver where you are going at 100 yards speed. When taking a taxi, you can’t tell the driver how fast you want to go

So the program is the same, here the speed parameter is removed.

Of course, the current sports framework still has many problems, which will be solved in the future. In the next article, we will discuss how to stop uniform motion.

A brief discussion on how Javascript achieves uniform motion_javascript skills