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();
}

效果

H5，js实现tom猫动态的简单APP相关推荐

HTML通过JS动态生成简单网页
HTML通过JS动态生成简单网页 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net 1. 提升单例有能力的1 2. 减少工作数量2 2.1. 减少距 ...
tom猫变声原理解析
很多网友对会说话的TOM猫的原理比较感兴趣,这里Android123就实现做一个简单的分析: 1. 音频采集这点主要是通过Android设备的麦克风实时采集音频,由于Android平台的MediaR ...
会说话的TOM猫的原理是什么
很多网友对会说话的TOM猫的原理比较感兴趣,这里Android123就实现做一个简单的分析: 1. 音频采集这点主要是通过Android设备的麦克风实时采集音频,由于Android平台的MediaR ...
JS实现b站动态评论区抽奖（含去重）
目录新前言补充视频演示旧前言教程 1.访问页面 2.打开"检查" 3.贴入代码 2.0版本多人抽取 3.0新版本单人抽取(适应b站动态改动) 3.1新版本多人抽取(适应b ...
通过开源项目SoundTouch实现类似Tom猫的变声功能
SoundTouch是一个开源的音频处理库,用于改变音频流或音频文件的节奏.音调和播放速率. 通过调节Tempo.Pitch和Playback Rate可以实现类似Tom猫的变声效果,对于这三个参数官 ...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...
【iOS开发-45】Tom猫案例：动画、imageNamed与imageWithContentOfFile对内存影响、图片文件夹放哪儿以及文档注释
今天tom猫案例效果: (1)最傻最笨的办法: --所有的点击都是按钮,只不过有6个有图标的按钮,有些头部.左右脚.肚子.尾巴那块也是一个按钮,只不过没背景没文字没边框的按钮用户按不到而已. --这里 ...
node.js(node.js+mongoose小案例)_实现简单的注册登录退出
一.前言通过node.js基本知识对node.js基本知识的一个简单应用 1.注册 2.登录 3.退出二.基本内容 1.项目结构搭建如图所示 2.这个小案列中用到了art-template子模板以 ...

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

css

html

效果

H5，js实现tom猫动态的简单APP相关推荐

最新文章

热门文章