The realization of Javascript multi object motion
- 2020-05-09 18:08:08
- OfStack
Let's take a look at the previous motion code, whether it supports multiple object motion, what would happen.
<style type="text/css">
div {
width: 100px;
height: 50px;
background: red;
margin: 10px;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
Here is the Javascript code:
<script type="text/javascript">
window.onload = function() {
var aDiv = document.getElementsByTagName('div');
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].onmouseover = function() {
startMove(this, 400);
};
aDiv[i].onmouseout = function() {
startMove(this, 100);
};
}
}
var timer = null;
function startMove(obj, iTarget) {
clearInterval(timer);
timer = setInterval(function() {
var speed = (iTarget - obj.offsetWidth) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetWidth == iTarget) {
clearInterval(timer);
} else {
obj.style.width = obj.offsetWidth + speed + 'px';
}
}, 30);
}
</script>
At this point, when the mouse moves over to the first div, it is running normally. But now if you move to the second or third div you get bug.
What is the reason for image? If you look at the picture, you can see that there is no movement. It actually looks like this,
The whole program is only 1 timer, for example, the first div started to move, the second div mouse moved into the previous 1 timer was killed, then naturally stuck there.
So the biggest problem is that the entire program only has one timer. So how do you solve this problem?
Solutions:
In fact, it is very simple, the timer as a property of 1 object plus, so each object has a timer in, when the timer is off when the timer is off on the object timer, on is also on the object timer
Then they can operate without interfering with each other at all.
Take a look at the revised Javascript code:
<script type="text/javascript">
window.onload = function() {
var aDiv = document.getElementsByTagName('div');
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].timer=null; // Think of the timer as 1 Properties of objects
aDiv[i].onmouseover = function() {
startMove(this, 400);
};
aDiv[i].onmouseout = function() {
startMove(this, 100);
};
}
}
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTarget - obj.offsetWidth) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetWidth == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + speed + 'px';
}
}, 30);
}
</script>
So there is no problem with the program, it can support the movement of multiple objects.