Home > Developer > JavaScript
Talking about how Javascript achieves constant speed and javascript speed
The exercise in Javascript is often used on websites. This time, I would like to share with you some basic applications of the exercise. This makes it easy for you to use it directly during development.
The code is easy to understand and suitable for beginners. Finally, we will organize a set of our own motion frames step by step.
Application case:
Move the mouse over the share, and the div on the left will be displayed. Move the meeting to recover. I believe this is useful for everyone. Let's take a look at how the code is implemented.
Copy codeThe Code is as follows:
<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>
Copy codeThe Code is as follows:
<Body>
<Div id = "div1">
<Span>
Share
</Span>
</Div>
</Body>
The following is the Javascript code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
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 );
}
</Script>
Ideas:
In the style, the initial left is-150, so that the div is scaled in and 0 is displayed. So we only need to change this value.
The parameter iTarget in startMove is the target point, indicating which target point will be stopped.
Control the speed to control the speed. If it reaches the target point, stop the timer.
Rule:
* Hypothesis
* Left: 30 iTarget: 300 returns the positive value to the right.
* Left: 600 iTarget: 50 indicates that it is negative to the left.
*
* The relationship between left and the target point in the current position iTarget is used to deduce the positive and negative velocity.
Note: The timer will be turned off first, because every time you move to share, a timer will be turned on. The more you open, the faster the timer will be, because multiple timers will be executed at the same time.
So ensure that a timer works every time.
Follow the principle that the fewer parameters, the better, the same function, so according to the above rule, speed is not passed as a parameter.
For example, if you take a taxi and tell the taxi driver where the speed is already 100 yards, it is generally impossible. You cannot tell the master how fast you are going to take a taxi.
So the program is the same. Here we will remove the speed parameter.
Of course, there are still many problems with the current motion frame, which will be solved in the future. In the next article, we will discuss how the constant motion stops.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
