廢話不多說了,直接給大家貼js代碼了,具體代碼如下所示:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"> <div id="ball" style="position:absolute;" onmouseover="stop()" onmouseout="jixu()"> <img src="http://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實現簡單的小球運動效果有所幫助!