Cat.zip汤姆猫,网页html做的

  • l0_930782
    了解作者
  • 14.6MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-26 02:09
    上传日期
用网页做了一个汤姆猫的网页app的,有声音 ,希望可以帮助正在学制一块的人
Cat.zip
  • manifest.json
    9.5KB
  • index.html
    4KB
  • img
  • Animations
  • cymbal
  • cymbal_00.jpg
    33KB
  • cymbal_04.jpg
    33.7KB
  • cymbal_08.jpg
    33.9KB
  • cymbal_07.jpg
    34KB
  • cymbal_12.jpg
    33KB
  • cymbal_05.jpg
    34KB
  • cymbal_03.jpg
    33.6KB
  • cymbal_09.jpg
    33.9KB
  • cymbal_11.jpg
    33.1KB
  • cymbal_06.jpg
    34KB
  • cymbal_10.jpg
    33KB
  • cymbal_01.jpg
    32.8KB
  • cymbal_02.jpg
    33.2KB
  • stomach
  • stomach_06.jpg
    31.7KB
  • stomach_21.jpg
    32.3KB
  • stomach_01.jpg
    32.4KB
  • stomach_12.jpg
    31.6KB
  • stomach_32.jpg
    32.3KB
  • stomach_02.jpg
    32.6KB
  • stomach_04.jpg
    32.5KB
  • stomach_27.jpg
    32.5KB
  • stomach_29.jpg
    32.4KB
  • stomach_26.jpg
    32.3KB
  • stomach_15.jpg
    32KB
  • stomach_19.jpg
    32.1KB
  • stomach_10.jpg
    31.4KB
  • stomach_11.jpg
    31.5KB
  • stomach_03.jpg
    32.8KB
  • stomach_09.jpg
    31.3KB
  • stomach_25.jpg
    31.8KB
  • stomach_07.jpg
    31.5KB
  • stomach_30.jpg
    32.4KB
  • stomach_00.jpg
    32.2KB
  • stomach_23.jpg
    32.1KB
  • stomach_24.jpg
    31.9KB
  • stomach_20.jpg
    32.3KB
  • stomach_08.jpg
    31.4KB
  • stomach_05.jpg
    32KB
  • stomach_17.jpg
    32KB
  • stomach_18.jpg
    32KB
  • stomach_33.jpg
    32.2KB
  • stomach_16.jpg
    32KB
  • stomach_13.jpg
    32KB
  • stomach_14.jpg
    32.2KB
  • stomach_28.jpg
    32.5KB
  • stomach_31.jpg
    32.4KB
  • stomach_22.jpg
    32.2KB
  • pie
  • pie_08.jpg
    37.3KB
  • pie_01.jpg
    34.1KB
  • pie_19.jpg
    19.1KB
  • pie_04.jpg
    36.1KB
  • pie_15.jpg
    20.9KB
  • pie_17.jpg
    19KB
  • pie_02.jpg
    36.2KB
  • pie_22.jpg
    31.7KB
  • pie_06.jpg
    36.3KB
  • pie_11.jpg
    31.4KB
  • pie_00.jpg
    33.2KB
  • pie_21.jpg
    28.9KB
  • pie_03.jpg
    36.8KB
  • pie_20.jpg
    24.7KB
  • pie_16.jpg
    20.3KB
  • pie_05.jpg
    36.3KB
  • pie_10.jpg
    39KB
  • pie_23.jpg
    33.2KB
  • pie_18.jpg
    18.5KB
  • pie_12.jpg
    24.2KB
  • pie_07.jpg
    36.7KB
  • pie_13.jpg
    21.1KB
  • pie_14.jpg
    21.2KB
  • pie_09.jpg
    38KB
  • angry
  • angry_05.jpg
    32.4KB
  • angry_01.jpg
    32.3KB
  • angry_04.jpg
    32.4KB
  • angry_24.jpg
    32.4KB
  • angry_22.jpg
    32.3KB
  • angry_14.jpg
    32KB
  • angry_00.jpg
    32.2KB
  • angry_12.jpg
    32.1KB
  • angry_10.jpg
    32.1KB
  • angry_09.jpg
    32.1KB
  • angry_25.jpg
    32.2KB
  • angry_16.jpg
    32KB
  • angry_07.jpg
    32.1KB
  • angry_23.jpg
    32.3KB
  • angry_18.jpg
    31.5KB
  • angry_20.jpg
    32.2KB
  • angry_02.jpg
    32.3KB
  • angry_19.jpg
    31.6KB
  • angry_13.jpg
    32KB
  • angry_08.jpg
    32.1KB
  • angry_15.jpg
    32KB
内容介绍
<!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>
评论
    相关推荐
    • HTML
      HTML HTML存储库。 HTML的嵌套库。
    • HTML教程
      HTML教程HTML教程HTML教程
    • HTMLHTML
      HTMLHTML
    • html
      html 佩拉蒂罕(Pelatihan)传播HTML和CSS
    • html相关
      html相关html相关html相关
    • Html教程
      Html教程 Html教程 Html教程 Html教程
    • html教程
      HTML教程关于基本语法的使用
    • html指南
      html查询指南,html格式
    • html
      html html 2021.03.22 HTML在Codecademy(chapter1)中的课程身体,头部,h,p,img,视频,标题,跨度,强壮,em 2021.03.23 HTML在Codecademy中学习课程(第2章)!DOCTYPE htmlhtml,table,thead,tbody ...
    • html学习
      html入门学习,适合初学者