苏素z
2017-07-06 11:09
<!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>
还没有人回答问题,可以看看其他问题
原生 JS 实现帧动画库
47184 学习 · 92 问题
相似问题