In diesem Artikel wird hauptsächlich die Methode zur Realisierung von Mehrobjektbewegungen in JS vorgestellt und das Prinzip und die damit verbundenen Betriebsfähigkeiten von Javascript bei der Realisierung von Mehrobjektbewegungen im Detail anhand von Beispielen analysiert Wenn Sie sich für JavaScript interessieren, lesen Sie bitte diesen Artikel
In diesem Artikel wird die Methode zur Realisierung der Bewegung mehrerer Objekte in JS anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Grundlegende Schritte
1 Holen Sie sich das, was Sie tun möchten getElementsByTagNameElemente für die Bewegung mehrerer Objekte
2. Dann durchläuft die for-Schleife die Elemente und fügt Ereignisse hinzu
3. Definieren Sie die Funktion startMove, die zwei Parameter erfordert, das aktuelle „bewegte“ Element und das Zielwertziel
Achtung: Bei der Bewegung mehrerer Objekte kann nicht alles geteilt werden
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li'); // 第一步
for(var i=0;i<liTags.length;i++){ // 第二步
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
var timer = null;
function startMove(obj,iTarget) { // 第三步，2个参数
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
if(obj.offsetWidth == iTarget){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>Problem:
Wenn die Ein- und Ausfahrgeschwindigkeit relativ hoch ist, kehren einige Lis nicht in ihren ursprünglichen Zustand zurück und bleiben in der Mitte stecken. Das liegt daran, dass alle Lis einen gemeinsamen Timer haben
Wenn sich die Maus in den ersten Li bewegt, rufen Sie startMove auf, um einen Timer zu starten. Wenn die Maus den Li entfernt, muss auch ein Timer gestartet werden, um den Li in seine ursprüngliche Position zurückzubringen , wir bewegen uns in die zweite li, der Timer wird zuerst gelöscht und dann bleibt die erste li auf halbem Weg stecken.
Lösen Sie dieses Problem: Lassen Sie jedes Li seinen eigenen Timer haben, um seine Änderungen zu steuern, und definieren Sie jedes Li während der for-Schleife. Einen Ihrer eigenen Timer
liTags[i].timer = null;// 给每个li都添加一个timer
geändert (der eigene Timer des aktuellen Objekts); hier gibt es kein Problem. obj.timer
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
background: lightblue;
}
</style><script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script><script>
window.onload = function () {
var aImgs = document.getElementsByTagName('img');
for(var i=0;i<aImgs.length;i++){
aImgs[i].timer = null;
aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
aImgs[i].onmouseover = function () {
startMove(this,30);
}
aImgs[i].onmouseout = function () {
startMove(this,100);
}
}
}
// var alpha = 100; 这里alpha在多物体运动里 不能公用
function startMove(obj,iTarget) {
clearInterval(obj.timer);
var iSpeed = (iTarget - obj.alpha)/10;
iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
obj.timer = setInterval(function(){
if(obj.alpha == iTarget){
clearInterval(obj.timer);
}else{
obj.alpha += iSpeed;
obj.style.opacity =obj.alpha/100;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
}
},30);
}
</script>JavaScript-Implementierung zum Hinzufügen und Löschen von Elementen zum Auswahl-Dropdown-Feld, Beispielfreigabe
Binäre Suche mit Javascript-Algorithmus Baum Der Beispielcode
spricht von der längsten gemeinsamen Teilsequenz in JavaScript
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methode zur Realisierung der Bewegung mehrerer Objekte in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
