Nos exemplos deste artigo, você pode usar o JS para obter um efeito simples de rejeição. Para conteúdo específico, consulte a seção Código.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> colision ball </title> <style> #box {width: 1000px; Altura: 800px; Posição: relativa; borda: 1px vermelho sólido; margem: 50px automático 0; } #boll {width: 50px; Altura: 50px;/* Radio de borda: 25px;*/ borda: 1px verde sólido; Posição: Absoluto; TOP: 66px; Esquerda: 88px; } </style> </head> <body> <div id = "box"> <div id = "boll"> </div> </div> <cript> var box = document.getElementById ('caixa'); 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) {// JULGE DIREÇÃO X ++; if (x> = box.clientWidth-boll.clientWidth) {movex = 0;} boll.style.left = x+'px';} mais {x-; se (x <= 0) {shirt = x+''; se move (movey) {y ++; </script> </body> </html>Entre eles, as variáveis movex e movey são a direção do movimento.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.