En los ejemplos de este artículo, puede usar JS para lograr un efecto de rebote simple. Para obtener contenido específico, consulte la sección del código.
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> colision ball </title> <style> #box {width: 1000px; Altura: 800px; Posición: relativo; borde: 1px rojo sólido; Margen: 50px Auto 0; } #Boll {ancho: 50px; Altura: 50px;/* borde-radio: 25px;*/ borde: 1px verde sólido; Posición: Absoluto; arriba: 66px; Izquierda: 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, temporizador1 = nulo, mudx = 1, mudy = 1; console.log (box.clientwidth-boll.clientwidth); console.log (box.clientwidth-boll.offsetwidth); timer1 = setInterval (function () {if (mOvex) {// juzgar dirección x ++; if (x> = box.clientWidth-boll.clientWidth) {Movex = 0;} boll.style.left = x+'px';} else {x--; if (x <= 0) {Movex = 1;} boll.steLe. (Movey) {y ++;Entre ellas, las variables MoveX y Movingy son la dirección del movimiento.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.