Dans les exemples de cet article, vous pouvez utiliser JS pour obtenir un simple effet de rebond. Pour un contenu spécifique, veuillez vous référer à la section Code.
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Collision Ball </Title> <style> #box {width: 1000px; hauteur: 800px; Position: relative; Border: 1px rouge solide; marge: 50px auto 0; } #boll {width: 50px; Hauteur: 50px; / * Border-Radius: 25px; * / bordure: 1px vert solide; Position: absolue; En haut: 66px; Gauche: 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, tempor1 = null, movex = 1, movey = 1; console.log (box.clientwidth-boll.clientwidth); console.log (box.clientwidth-boll.offsetwidth); timer1 = setInterval (function () {if (movex) {// juge 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 + '; } if (Movey) {y ++; </cript> </ body> </html>Parmi eux, les variables Movex et Movey sont la direction du mouvement.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.