用js實現圖片（小球）在屏幕上上下左右移動
阿新 • • 發佈：2018-10-17
tin doctype ctx eight doc itl 左右 idt ext
<html> <head> <title>Document</title> </head> <body style="background-image:URL(‘./b1.png‘)"> <div id="sundiv" style="position:absolute"> <img src="太陽.png"/> </div> <script language="javascript" type="text/javascript"> //定義全局變量 directX=1;//x軸的方向 directY=1;//y軸的方向 //上面兩個全局變量似乎沒有生效 sunX=0;//小太陽的坐標x sunY=0;//小太陽的坐標y function sunMove(){ sunX+=directX; sunY+=directY; //這條語句無法執行，竟然是因為<!doctype html>存在 //修改div的left topsundiv.style.top=sunY+"px"; //window.alert(sunY); //window.alert(sundiv.style.top); sundiv.style.left=sunX+"px"; //判斷什麽時候，轉變方法 //x方法（offsetWidth可以返回當前這個對象的實際寬度） if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){ //window.alert(directX); //directX-=directX; directX=-directX; } //判斷y if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){ //directY-=directY; directY=-directY; //window.alert(directY); } } setInterval("sunMove()",3); //這裏寫的是setInterval("sunMove()",100);，而不是 //setInterval("sunMove",100); </script> </body> </html> <!-- 運行上述代碼時，出現一個巨坑，瀏覽器沒有更新代碼，害我刷新對運行結果根本影響。還有<!DOCTYPE html>這句話使代碼無法正確運行 -->
用js實現圖片（小球）在屏幕上上下左右移動