In den Beispielen in diesem Artikel können Sie JS verwenden, um einen einfachen Absprungeffekt zu erzielen. Für bestimmte Inhalte finden Sie im Abschnitt Code.
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> Kollisionsball </title> <style> #box {width: 1000px; Höhe: 800px; Position: Relativ; Grenze: 1px solide Rot; Rand: 50px Auto 0; } #boll {width: 50px; Höhe: 50px;/* Border-Radius: 25px;*/ Border: 1PX Feste Grün; Position: absolut; Oben: 66px; links: 88px; } </style> </head> <body> <div id = "box"> <div id = "boll"> </div> </div> <script> var box = document.getElementById ('box'); var boll = document.getElementById ('Boll'); var x = 88, y = 66, timer1 = null, movex = 1, Movey = 1; console.log (box.clientwidth-boll.clientwidth); console.log (box.clientwidth-boll.Offsetwidth); timer1=setInterval(function(){ if (movex) {//Judge direction x++; if (x>=box.clientWidth-boll.clientWidth) { movex=0; }boll.style.left=x+'px';} else{ x--; if (x<=0) { movex=1; }boll.style.left=x+'px'; } if (Movey) {y ++; </script> </body> </html>Unter ihnen sind Movex- und Movey -Variablen die Richtung der Bewegung.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.