js頁面實現小球在div固定容器中上下左右彈射
阿新 • • 發佈：2018-12-14
程式碼不難，也是挺簡單的，主要考慮邊界問題。網頁我已經掛到伺服器了，可以看看效果是否是你想要的：
http://codingcoge.cn:8080/ball/ball.html
程式碼：也可以通過F12來檢視js程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript"> var positionX = 0;//初始橫座標 var positionY = 0;//初始縱座標 var directX = 1;//移動時候的方向 1代表正方向右 var derectY = 1;//移動時候的方向 1代表正方向上 function ballMove(){ if(positionX+div2.offsetWidth>=div1.offsetWidth||positionX<0){//防止飛出div directX=-directX;//當要飛出div的時候 調整方向為反方向 } if(positionY+div2.offsetHeight>=div1.offsetHeight||positionY<0){ derectY=-derectY; } positionX+=2*directX; positionY+=2*derectY; div2.style.left = positionX+'px'; div2.style.top = positionY+'px'; } setInterval("ballMove()",10); //定時作用 </script> <body> <div id="div1" style="width: 500px;height: 400px;top: 100px;border: 1px solid cornsilk;position: absolute"> <div id="div2" style="position: absolute;left: 0px;top: 0px;"><img style="height: 50px;top: 50px;" src="image/ball.jpg" /></div> </div> </body> </html>