H5，js实现tom猫动态的简单APP

css

@charset “utf-8”;
*{
padding: 0;
margin: 0;
}
#cat{
width: 100%;
height: 100%;
}

html,body{
width: 100%;
height: 100%;

}
img{
position: absolute;

}
#cymbal{
bottom: 40%;
left: 5%;
}
#drink{
bottom: 30%;
left: 5%;
}

#eat{
bottom: 20%;
left: 5%;
}
#scratch{
bottom: 40%;
right: 5%;
}
#fart{
bottom: 30%;
right: 5%;

}
#pie{
bottom: 20%;
right: 5%;
}
/点击区域/
/额头/
#knockout{
width:20% ;
height: 5%;
/background: blue;/
position: absolute;
left: 40%;
top: 18%;
}
#footright{
width:15% ;
height: 5%;
/background: blue;/
position: absolute;
left: 34%;
top: 90%;
}
#footleft{
width:15% ;
height: 5%;
/background: blue;/
position: absolute;
right: 34%;
top: 90%;
}
#stomach{
width:24% ;
height: 25%;
/background: blue;/
position: absolute;
left: 38%;
top: 60%;
}
#angry{
width:26% ;
height:7%;
/background: blue;/
position: absolute;
left: 37%;
top: 33%;
}

html

</div>
<!--点击鼻子-->
<div id="angry">
	
</div>
<!--肚子-->
<div id="stomach">
	
</div>
<!--左脚-->
<div id="footleft">
	
</div>
<!--右脚-->
<!---->
<div id="footright">
	
</div>
<!--添加音乐-->
<audio id="music"></audio>
<script type="text/javascript" src="js/tom.js">
	
</script>

## Js var timer = null;

//封装函数，解决图片带0的问题
function indexImg(index){
if(index<10){
return “0”+index;
}else{
return index;
}
}
//封装函数，拼接图片路径(name//文件夹名字，index//当前下标)
function imgSrc(name,index){
return “img/Animations/”+name+"/"+name+"_"+indexImg(index)+".jpg";

}
//封装函数，开始动画
function start(name,count){
//获取元素
var cat = document.getElementById(“cat”);
//设置计时器,用来切换图片
var index = 0;
clearInterval(timer);
timer = setInterval(function(){
//切换图片
//判断是否是最后一张图片
if(++index<count){
cat.src = imgSrc(name,index);
}else{
//清除计时器
clearInterval();

	}
},80);

}
//敲锣
var music = document.getElementById(“music”)
var cymbal = document.getElementById(“cymbal”);
cymbal.οnclick=function(){
start(“cymbal”,13);
music.src=“mp3/pia.mp3”;
music.play();
}
var drink= document.getElementById(“drink”);
drink.οnclick=function(){
start(“drink”,81);
music.src=“mp3/pi.wav”;
music.play();
}
var eat= document.getElementById(“eat”);
eat.οnclick=function(){
start(“eat”,40);
music.src=“mp3/tomaiyou.mp3”;
music.play();
}
var pie= document.getElementById(“pie”);
pie.οnclick=function(){
start(“pie”,24);
music.src=“mp3/tomaiyou.mp3”;
music.play();
}
var fary= document.getElementById(“fart”);
fary.οnclick=function(){
start(“fart”,28);
music.src=“mp3/tomaiyou.mp3”;
music.play();
}
var scrach= document.getElementById(“scratch”);
scrach.οnclick=function(){
start(“scratch”,56);
music.src=“mp3/tomaiyou.mp3”;
music.play();
}
var divM = document.getElementById(“knockout”);
divM.onclick = function () {
start(“knockout”,81)
}
var divM1 = document.getElementById(“angry”);
divM1.onclick = function () {
start(“angry”,26)
}
var divM2 = document.getElementById(“footright”);
divM2.onclick = function () {
start(“footright”,30);
music.src=“mp3/tomaiyou.mp3”;
music.play();
}
var divM3 = document.getElementById(“footleft”);
divM3.onclick = function () {
start(“footleft”,30);
music.src=“mp3/tomaiyou.mp3”;
music.play();
}
var divM4 = document.getElementById(“stomach”);
divM4.onclick = function () {
start(“stomach”,34);
music.src=“mp3/tomaiyou.mp3”;
music.play();
}

效果