Js让人物移动Demo演示

body{background-color:white; margin: 0 0 0 10px; width:98%;}
#allHead{display:none;}
#allFoot{display:none;}
#footLine{display:none;}

演示：

// window.onload = function(){walk();}
var moveLengthLeft = 0;
var moveLengthTop = 0;

var actionST = 0;

var timeInterval = 150;

var pic = 0;

function action()
{
var pic1 = "http://img.my.csdn.net/uploads/201209/08/1347116386_5964.png";
var pic2 = "http://img.my.csdn.net/uploads/201209/08/1347116381_2316.png";
var pic3 = "http://img.my.csdn.net/uploads/201209/08/1347116375_7363.png";
var actionArray = [pic1, pic2, pic3];

var doc = document.getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0;
}else{
pic += 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray[pic];
}

function walk()
{
setInterval(action, timeInterval);

for(var i = 0; i < 100; i++){
$("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback。callback里可以放函数。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft += 2;
moveLengthTop += 1;
}
}

function standCaocao()
{
pic = 2;
}
// ]]>