一、HTML
<input id='btn1' type='button' value='开始运动‘ />
<img src='dog.gif' id='dog' />
<img src='bone1.jpg class='bone' />
二、CSS
#dog{
display:block;
width:100px;
position: absolute;
left: 0px;
top:60px;
}
.bone{
width: 100px;
position:absolute;
left: 410px;
}
三、script
function startMove(iTarget){
var oDog=document.getElementById('dog');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=0;
if (oDog.offsetLeft>iTarget) {
iSpeed=-7;
}
else{
iSpeed=7;
}
if (Math.abs(oDog.offsetLeft-iTarget)<7) {
clearInterval(timer);
oDog.style.left=iTarget+'px';
}
else{
oDog.style.left=oDog.offsetLeft+iSpeed+'px';
}
},30)
}
var timer=null;
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
startMove(330);
}
}
四、实际效果
有写的不对的地方，请大家指出，共同学习，共同进步；
喜欢请收藏，想看更多内容，请关注！