一、HTML

二、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);

}

}

四、实际效果

有写的不对的地方，请大家指出，共同学习，共同进步；

喜欢请收藏，想看更多内容，请关注！