Dalam contoh dalam artikel ini, Anda dapat menggunakan JS untuk mencapai efek bouncing sederhana. Untuk konten tertentu, silakan merujuk ke bagian kode.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> bola tabrakan </title> <tyle> #box {width: 1000px; Tinggi: 800px; Posisi: kerabat; Perbatasan: 1px solid red; Margin: 50px Auto 0; } #boll {width: 50px; Tinggi: 50px;/* Border-Radius: 25px;*/ Border: 1px Solid Green; Posisi: Absolute; Atas: 66px; Kiri: 88px; } </tyle> </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) {// juri arah x ++; if (x> = box.clientwidth-boll.clientwidth) {movex = 0;} boll.style.Left = x+'px';} else {x-if (x <= 0) {x+'px';} else {x-; if (x <= 0) {x); } if (moving) {y ++; </script> </body> </html>Di antara mereka, variabel movex dan movey adalah arah gerakan.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.