<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="rabbit.css">
<script type="text/javascript">
var imgUrl='rabbit-big.png';
var positions=['0 -854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];
var ele=document.getElementById("rabbit");
animation(ele,position,imgUrl);
function animation(ele,positions,imgUrl){
ele.style.backgroundImage='url(' + imgUrl + ')';
ele.style.backgroundRepeat='no-repeat';
var index=0;
function run(){
var position=position[index].split(' ');
ele.style.backgroundPosition=position[0]+'px '+position[1]+'px ';
index++;
if(index>=position.length){
index=0;
}
setTimeout(run,80);
}
run();
}
</script>
<title>动画演示</title>
</head>
<body>
<div id=rabbit></div>
</body>
</html>