一、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()函数一开始先清空老的定时器，在设置新的定时器，本问为设置；