Cat.zip汤姆猫，网页html做的_HTML_其他

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link rel="stylesheet" type="text/css" href="css/tomcat.css"/> <style type="text/css"> #FootLeft{ width:17%; height: 7%; border: 2px solid cyan; position: absolute; left: 30%; bottom: 3%; } #FootRight{ width:17%; height: 7%; border: 2px solid cyan; position: absolute; right: 30%; bottom: 3%; } #Stomach{ width: 20%; height: 15%; border: 2px solid cyan; position: absolute; left: 40%; top: 70%; } #Knockout{ width: 20%; height: 15%; border: 2px solid cyan; position: absolute; left: 40%; top: 20%; } </style> </head> <body> <div id="FootLeft"></div> <div id="FootRight"></div> <div id="Knockout"></div> <div id="Stomach"></div> <audio src="" autoplay="autoplay" id="music" rel='nofollow' onclick='return false;'></dudio> </body> <script type="text/javascript"> // 实现敲锣功能 // 鼠标点锣的图片,不停的切换背景 var music=document.getElementById("music") var angry=document.getElementById("angry"); var cymbal=document.getElementById("cymbal"); var drink=document.getElementById("drink"); var eat=document.getElementById("eat"); var pie=document.getElementById("pie"); var fart=document.getElementById("fart"); var scratch=document.getElementById("scratch"); document.getElementById("Knockout").onclick=function(){ act(81,"knockout") } document.getElementById("FootLeft").onclick=function(){ act(30,"footRight") } document.getElementById("FootRight").onclick=function(){ act(30,"footLeft") } document.getElementById("Stomach").onclick=function(){ act(81,"stomach") music.src="img/tomaiyou.mp3" music.play(); } // 设置点击事件 var timer; // 做一个公共的函数来执行动画效果,需要一个动态的参数来表示,需要一个动态的路径变量 function act(count,home){ clearInterval(timer); //图片改变的索引 var index=0; timer=setInterval(function(){ // index+=1; if(++index>count){ clearInterval(timer); } // 处理图片索引的范围 // if(index==count){ // clearInterval(timer); // } // var index1=""; // if(index<10){ // index1="0"+index; // }else{ // index1=index; // } angry.src="img/Animations/"+home+"/"+home+"_"+getIndex(index)+".jpg"; },80) } function getIndex(index){ if(index<10){ return "0"+index; }else{ return index; } } eat.onclick=function(){ act(40,"eat") } drink.onclick=function(){ act(81,"drink") } cymbal.onclick=function(){ act(13,"cymbal") music.src="img/pia.mp3" music.play(); // 清除掉上一次没有结束的定时器 // clearInterval(timer); // var angry=document.getElementById("angry"); // //图片改变的索引 // var index=0; // timer=setInterval(function(){ // index+=1; // // 处理图片索引的范围 // if(index==13){ // clearInterval(timer); // } // var index1=""; // if(index<10){ // index1="0"+index; // }else{ // index1=index; // } // angry.src="img/Animations/cymbal/cymbal_"+index1+".jpg"; // },80) } fart.onclick=function(){ act(28,"fart") } pie.onclick=function(){ act(24,"pie") // music.src="img/pi.wav" // music.play(); } scratch.onclick=function(){ act(56,"scratch") } </script> </html>