javascript寫碰撞運動且同時切換背景

一、HTML

佈局比較簡單

一個開始按鈕+一個內含多個img的div

<input type="button" value="開始運動" id="btn" />

<div id="div1">

<img src="img/5.png" alt="" style="display:block" />

<img src="img/juzi.jpg" alt="" />

<img src="img/laofuzi.jpg" alt="" />

<img src="img/make.jpg" alt="" />

<img src="img/zhuge.jpg" alt="" />

<img src="img/yangjian.jpg" alt="" />

</div>

二、CSS

div加absolute屬性，因為最後運動的是div；

img絕對定位，使圖片摞起來，設置display為none，第一img設置行內樣式為block，保證初始時div中的內容；

#div1 {

width:200px;

height:200px;

position:absolute;

}

#div1 img{

display: none;

width: 200px;

height: 200px;

position: absolute;

left: 0px;

top: 0px;

}

三、script

startMove()函數，為避免div碰撞後出現閃現滾動條，要提前檢測，並將div拉回邊界；

tabImg()函數，為解決num大於aImg.length的情況，採用了取模；

window.onload=function(){

var oBtn=document.getElementById('btn');

oBtn.onclick=function(){

startMove();

}

}

var iSpeedX=6;

var iSpeedY=8;

var num=0;

function startMove(){

setInterval(function (){

var oDiv=document.getElementById('div1');

var l=oDiv.offsetLeft+iSpeedX;

var t=oDiv.offsetTop+iSpeedY;

if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){

iSpeedY*=-1;

t=document.documentElement.clientHeight-oDiv.offsetHeight;

num++;

tabImg(num);

}

else if(t<=0){

iSpeedY*=-1;

t=0;

num++;

tabImg(num);

}

if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)

{

iSpeedX*=-1;

l=document.documentElement.clientWidth-oDiv.offsetWidth;

num++;

tabImg(num);

}

else if(l<=0)

{

iSpeedX*=-1;

l=0;

num++;

tabImg(num);

}

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

}, 30);

}

function tabImg(num){

var oDiv=document.getElementById('div1');

var aImg=oDiv.getElementsByTagName('img');

for (var i = 0; i < aImg.length; i++) {

aImg[i].style.display='none';

}

aImg[num%aImg.length].style.display='block';

}

四、最終效果

點擊開始運動，圖片運動，每次碰撞後圖片切換；

多次點擊開始運動，運動會疊加加快，因為沒有清空定時器，大家可以定義一個定時器，在startMove()函數一開始先清空老的定時器，在設置新的定時器，本問為設置；