Dieser Artikel stellt hauptsächlich die Methode von JS zur Realisierung von Multi-Objekt-Bewegungen vor. Er analysiert die Prinzipien und zugehörigen Operationstechniken von Javascript zur Realisierung von Multi-Objekt-Bewegungen im Detail in Form von Beispielen. Ich hoffe, es kann allen helfen.
Grundlegende Schritte
1. Erhalten Sie die Elemente, die von mehreren Objekten verschoben werden sollen
2 . Dann durchläuft die for-Schleife die Elemente und fügt Ereignisse hinzu
3 Definieren Sie die startMove-Funktion, die zwei Parameter erfordert, das aktuelle „bewegte“ Element und den Zielwert target
Hinweis: 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, scheint es, dass einige Li nicht in ihren ursprünglichen Zustand zurückkehren können und in der Mitte stecken bleiben <; 🎜>Wenn sich die Maus in die erste Position bewegt, rufen Sie startMove auf, um einen Timer zu starten. Wenn die Maus li entfernt, müssen Sie auch einen Timer starten, um li in seine ursprüngliche Position zurückzubringen. Wenn li die Hälfte erreicht, bewegen wir uns in die zweite Position li, und der Timer wird zuerst gelöscht. Zu diesem Zeitpunkt blieb der erste li auf halbem Weg stecken.
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
Der vorherige Timer hier wurde in
geändert (der eigene Timer des aktuellen Objekts); hier gibt es kein Problem.obj.timer Der vollständige Code lautet wie folgt:
<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>Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
