js實現簡單小例項（奔跑的小豬）
阿新 • • 發佈：2018-12-18
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>window物件</title> <style> #img{ width: 300px; height: 300px; position: absolute; left: 0px; top: 50%; } </style> <script> var w ;//頁面的寬度 var img;//影象物件 var imgLeft;//影象左邊的位置 var imgWidth; //影象 的寬度 var delta =5 ;//每次移動的距離 var delay =10;//時間 window.onload = function(){ w = window.innerWidth; img = document.getElementById("img"); imgLeft = img.offsetLeft; imgWidth = img.width; //呼叫move（）方法 move(); }; function move(){ //判斷影象是否越界（超出頁面的寬度） if(imgLeft<0||imgLeft+imgWidth>w){ delta=-delta;//變號 } img.style.left = imgLeft+delta+"px"; //移動位置後需要重新修改左邊的位置 imgLeft = img.offsetLeft; //重複不斷呼叫函式 setTimeout(move,delay); } </script> </head> <body> <img src="img/img.jpg" id="img" /> <!--圖片在--> </body> </html>
