ในตัวอย่างในบทความนี้คุณสามารถใช้ JS เพื่อให้ได้เอฟเฟกต์ตีกลับอย่างง่าย สำหรับเนื้อหาเฉพาะโปรดดูส่วนรหัส
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> บอลการปะทะ </title> <style> #box {width: 1000px; ความสูง: 800px; ตำแหน่ง: ญาติ; ชายแดน: 1px ของแข็งสีแดง; มาร์จิ้น: 50px auto 0; } #boll {width: 50px; ความสูง: 50px;/* แนวชายแดน: 25px;*/ ชายแดน: 1px Solid Green; ตำแหน่ง: สัมบูรณ์; ด้านบน: 66px; ซ้าย: 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 () {ถ้า (movex) {// ตัดสินทิศทาง x ++; ถ้า (x> = box.clientWidth-boll.ClientWidth) {movex = 0;} boll.style.left = x+'px'; } if (movey) {y ++; </script> </body> </html>ในหมู่พวกเขาตัวแปร Movex และ Movey เป็นทิศทางของการเคลื่อนไหว
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น