この記事の例では、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;/* border-radius：25px;*/ border：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（）{if（movex）{// Judge direction x ++; if（x> = box.clientwidth-boll.clientwidth）{movex = 0;} boll.style.left = x+'px';} else {x - ; if（x <= 0）{movex = 1;} fx ' （y ++）if（box.clientheight）{move.top = y+'px}; </script> </body> </html>その中で、MovexとMovey変数は動きの方向です。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。