废话不多说了，直接给大家贴js代码了，具体代码如下所示：
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body> <div> <img src="https://img.taobaocdn.com/imgextra/i/TBfGvsdpXXXXbDXXXXXXXXXXXX-.gif"/> </div> <script type="text/javascript"> //定义局部变量 var directX=;//定义x轴方向 var directY=;//定义y轴方向 var ballX=;//定义x轴坐标 var ballY=;//定义y轴坐标 var speed=;//定义一个速度 var myball=document.getElementById("ball"); function ballMove(){ ballX=ballX+directX*speed; ballY=ballY+directY*speed; //改变div的left,top的值 myball.style.left=ballX+"px"; myball.style.top=ballY+"px"; //判断x轴什么时候转向 if(ballX+myball.offsetWidth>=document.documentElement.clientWidth||ballX<=){ //clientWidth浏览器不带滚动条的宽度;clientHeight浏览器不带工具栏菜单栏以及滚动条等的高度 directX=-directX;//offsetWidth可以返回一个对象的实际宽度(不带单位)offsetHeight类同 } //判断y轴何时转向 if(ballY+myball.offsetHeight>=document.documentElement.clientHeight||ballY<=){ directY=-directY; } } var stopmove=setInterval("ballMove()",); function stop(){ clearInterval(stopmove); } function jixu(){ var stopmove=setInterval("ballMove()",); ; } </script> </body> </html>
以上代码是比较简单，希望对大家使用Js实现简单的小球运动效果有所帮助！
您可能感兴趣的文章: