Sports in Javascript are often used on the website. This time I will share with you some basic applications of sports. It is convenient for everyone to use directly during development.
The code is simple and easy to understand and is suitable for beginners. Finally, I will sort out my own sports framework step by step.
Application case renderings:
Move the mouse to share and the div on the left will be displayed. Remove and recover by yourself. I believe that everyone will use this very practical. Let’s see how the code is implemented.
The code copy 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>
The code copy is as follows:
<body>
<div id="div1">
<span>
Share to
</span>
</div>
</body>
The following is the Javascript code
The code copy 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:
The initial left in the style is -150. The div is shrinked inside, and it will be displayed if given 0. Then we just need to change this value
The parameter iTarget in startMove is the target point, indicating which target point you will stop.
Controlling the size of the speed can control the speed of the movement. If the target point is reached, stop the timer.
law:
* Assumption
* left:30 iTarget:300 It is obtained as positive to the right
* left:600 iTarget:50 It is negative to the left
*
* The relationship between the current position left and the target point iTarget infers the positive and negative speed
Note: The timer must be turned off as soon as you start, because every time you move to share, a timer will be turned on. The more you turn on, the faster the speed will be, because there will be multiple timers to execute at the same time.
So each time you must ensure that one timer works.
Follow: the same function function, the fewer parameters, the better, so according to the above rules, speed is not passed as parameters.
To give an example in life: It is generally impossible to take a taxi and tell the taxi driver that he has 100 yards to go wherever he has reached. You can't tell the master how fast you want to run
So the program is the same, so the speed parameter is removed here.
Of course, there will be many problems with the current sports framework, which will be solved one after another in the future. In the next article, let’s discuss how to stop uniform motion.