<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
body,html{
width:100%;
height:100%;
}
#cat{
position: absolute;
width: 100%;
height: 100%;
}
img{
position: absolute;
width:50px;
}
#cymbal{
left: 5%;
bottom: 40%;
}
#eat{
left: 5%;
bottom:20%
}
#drink{
left: 5%;
bottom: 30%;
}
#fart{right: 5%;bottom: 40%;}
#pie{right: 5%;bottom: 30%;}
#scratch{right: 5%;bottom: 20%;}
</style>
</head>
<body>
<img id="cat" src="img/angry/angry_00.jpg"/>
<!--加载按钮-->
<img id="cymbal" src="img/cymbal/cymbal.png">
<img id="eat" src="img/eat/eat.png">
<img id="drink" src="img/drink/drink.png">
<img id="pie" src="img/pie/pie.png">
<img id="fart" src="img/fart/fart.png">
<img id="scratch" src="img/scratch/scratch.png">
<script>
var timer;
window.οnlοad=function(){
// 点击相应按钮,播放相应图片。动画名称,图片总数
document.getElementById("cymbal").οnclick=function(){
startAnimation("cymbal",12);
}
document.getElementById("eat").οnclick=function(){
startAnimation("drink",81);
}
document.getElementById("drink").οnclick=function(){
startAnimation("eat",40);
}
document.getElementById("fart").οnclick=function(){
startAnimation("fart",28);
}
document.getElementById("pie").οnclick=function(){
startAnimation("pie",24);
}
document.getElementById("scratch").οnclick=function(){
startAnimation("scratch",56);
}
}
//播放动画的方法,动画名称和图片总数
function startAnimation(name,count){
clearInterval(timer);
var index=0;
var img=document.getElementById("cat");
timer=setInterval(function(){
//判断是否可以继续播放
if(++index<count){
img.src=getImageName(name,index);
}else{
//没有可以播放的图片,清楚定时器
clearInterval(timer);
}
},80);
}
//图片路径
//根据动画名和图片索引返回图片名
function getImageName(name,index){
//img/angry/angry_00.jpg
return "img/"+name+"/"+name+"_"+getIndex(index)+".jpg" ;
}
//实现02功能
function getIndex(index){
//若小于10,拼接一个0
if(index<10){
return "0"+index;
}else{
return index;
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
body,html{
width:100%;
height:100%;
}
#cat{
position: absolute;
width: 100%;
height: 100%;
}
img{
position: absolute;
width:50px;
}
#cymbal{
left: 5%;
bottom: 40%;
}
#eat{
left: 5%;
bottom:20%
}
#drink{
left: 5%;
bottom: 30%;
}
#fart{right: 5%;bottom: 40%;}
#pie{right: 5%;bottom: 30%;}
#scratch{right: 5%;bottom: 20%;}
</style>
</head>
<body>
<img id="cat" src="img/angry/angry_00.jpg"/>
<!--加载按钮-->
<img id="cymbal" src="img/cymbal/cymbal.png">
<img id="eat" src="img/eat/eat.png">
<img id="drink" src="img/drink/drink.png">
<img id="pie" src="img/pie/pie.png">
<img id="fart" src="img/fart/fart.png">
<img id="scratch" src="img/scratch/scratch.png">
<script>
var timer;
window.οnlοad=function(){
// 点击相应按钮,播放相应图片。动画名称,图片总数
document.getElementById("cymbal").οnclick=function(){
startAnimation("cymbal",12);
}
document.getElementById("eat").οnclick=function(){
startAnimation("drink",81);
}
document.getElementById("drink").οnclick=function(){
startAnimation("eat",40);
}
document.getElementById("fart").οnclick=function(){
startAnimation("fart",28);
}
document.getElementById("pie").οnclick=function(){
startAnimation("pie",24);
}
document.getElementById("scratch").οnclick=function(){
startAnimation("scratch",56);
}
}
//播放动画的方法,动画名称和图片总数
function startAnimation(name,count){
clearInterval(timer);
var index=0;
var img=document.getElementById("cat");
timer=setInterval(function(){
//判断是否可以继续播放
if(++index<count){
img.src=getImageName(name,index);
}else{
//没有可以播放的图片,清楚定时器
clearInterval(timer);
}
},80);
}
//图片路径
//根据动画名和图片索引返回图片名
function getImageName(name,index){
//img/angry/angry_00.jpg
return "img/"+name+"/"+name+"_"+getIndex(index)+".jpg" ;
}
//实现02功能
function getIndex(index){
//若小于10,拼接一个0
if(index<10){
return "0"+index;
}else{
return index;
}
}
</script>
</body>
</html>