沒出現(xiàn)效果
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>動畫demo</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="rabbit"></div>
<script src="demo.js"></script>
</body>
</html>
/*--------------------css------------*/
#rabbit{
width:80px;
height:102px;
}
/*------js--------*/
var imgUrl ='rabbit.png';
var positions = ['0 -854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];
var ele = document.getElementById('rabbit');
animation(ele,positions,imgUrl);
function animation(ele,positions,imgUrl)
{
ele.style.backgroundImage = 'url('+ imgUrl + ')';
ele.style.backgroundRepeat = 'no-repeat';
var index = 0;
function run()
{
var position = positions[index].split(' ');
ele.style.backgroundPosition = position[0] + 'px ' + position[1] + 'px';
index++;
if(index >= positions.length){
index = 0;
}
setTimeout(run,80);
}
run();
}
2016-06-09
明白了這里position[0] + 'px '有空格
2016-06-14
真的是細(xì)節(jié)很重要!!!
2016-06-09
我的可以顯示圖片就是沒有動畫效果
2016-06-03
代碼沒問題，你檢查一下是不是圖片路徑的錯誤，或者是圖片的文件名不對