The web site will often use JavaScript in the movement, this time to share some of the basic sports applications. Convenient for everyone to use directly in the development.
The code is easy to understand and is suitable for beginners. Finally, a step-by-step arrangement of their own sports framework.
Application Case Effect Chart:
The mouse moves to share and the div on the left is displayed. Move the meeting to restore itself. Believe this everyone will use very practical, below see how the code is implemented.
Copy Code code 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 Code code as follows:
<body>
<div id= "Div1" >
<span>
Share to
</span>
</div>
</body>
Here's the JavaScript code
Copy Code code 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:
The original left in the style is-150 so the div is indented inside and the 0 will show up. So we just need to change the value.
The parameter ITarget in the Startmove is the target point, indicating which target point will stop.
Control the size of the speed can control the speed of movement. Stop the timer if the target point is reached.
Law:
* Assuming
* Left:30 itarget:300 to the right
* left:600 itarget:50 to left negative
*
* By the relationship between the current position left and the target point ITarget infer the positive and negative of the velocity
Note: A timer will be turned off, because every time you move to share, you will open a timer, the more open the more relative speed is faster, because there will be multiple timer execution.
So each time to ensure that a timer work.
Follow: function function, the less the better the principle, so according to the above rules of speed is not as a parameter passed in.
Give a life example: You take a taxi, tell the taxi driver has 100 yards of speed to where, generally is not possible bar. You can't tell Shifu how fast you're going to run.
So the program is the same, here is the speed of the reference removed.
Of course, there will be many problems in the current framework of motion, which will be solved in succession. In the next article, let's explore how the uniform motion stops.