Web前端的微信H5应用--妈妈是超人

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zcz_822/article/details/52712317
<ol><li>按住圆圈图标不断的切换图片和播放音乐,松开时停止切换和播放,图片与图片之间有动作的效果,切换的时候会有动画的效果;</li><li>将图片安排在时间轴上,可以控制播放顺序和播放时间;</li><li>图片的资源过多,采用了文件预加载的方法;</li><li>采用了base64编码图片,用于加载的进度条的使用。 (不知道新的编辑器为什么不能使用,添加第二段代码的时候老是查到第一段代码的中间去了)</li></ol>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">	
	<title>亲爱的宝贝,妈妈是你的专属超人。</title>
	<script src="js/resLoader.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>	
	<script type="text/javascript" src="js/supermmjs.js"></script>
	<script type="text/javascript" src="js/jquery.rotate.min.js"></script>		
	<script type="text/javascript">
	//进度条,预加载资源
	var timer;
	var timestamp=new Date().getTime();
	var loader = new resLoader({
		resources : [
			//'js/image/waiting.gif?'+timestamp+'@',
			'js/image/finger.png?'+timestamp,
			'js/image/finger1.png?'+timestamp,
			'js/image/nai.png?'+timestamp,
			'js/image/yinyue.png?'+timestamp,			
			'image/p1_0.jpg?'+timestamp,
			'image/p1_1.jpg?'+timestamp,
			'image/p1_2.jpg?'+timestamp,
			'image/p1_3.jpg?'+timestamp,
			'image/p1_4.jpg?'+timestamp,
			'image/p1_5.jpg?'+timestamp,
//			'image/p1_6.jpg?'+timestamp,			
			'image/p2_0.jpg?'+timestamp,
			'image/p2_1.jpg?'+timestamp,
			'image/p2_2.jpg?'+timestamp,
			'image/p2_3.jpg?'+timestamp,
			'image/p2_4.jpg?'+timestamp,
			'image/p2_5.jpg?'+timestamp,
			'image/p2_6.jpg?'+timestamp,
			'image/p2_7.jpg?'+timestamp,
			'image/p3_0.jpg?'+timestamp,
			'image/p3_1.jpg?'+timestamp,
			'image/p3_2.jpg?'+timestamp,
			'image/p3_3.jpg?'+timestamp,
			'image/p3_4.jpg?'+timestamp,
			'image/p3_5.jpg?'+timestamp,
//			'image/p3_6.jpg?'+timestamp,			
			'image/p4_0.jpg?'+timestamp,
			'image/p4_1.jpg?'+timestamp,
			'image/p4_2.jpg?'+timestamp,
			'image/p4_3.jpg?'+timestamp,
			'image/p4_4.jpg?'+timestamp,
			'image/p4_5.jpg?'+timestamp,
			'image/p4_6.jpg?'+timestamp,
			'image/p4_7.jpg?'+timestamp,
			'image/p5_0.jpg?'+timestamp,
			'image/p5_1.jpg?'+timestamp,
			'image/p5_2.jpg?'+timestamp,
			'image/p5_3.jpg?'+timestamp,
			'image/p5_4.jpg?'+timestamp,
			'image/p5_5.jpg?'+timestamp,
			'image/p5_6.jpg?'+timestamp,
			'image/p5_7.jpg?'+timestamp,
			'image/p6_0.jpg?'+timestamp,
			'image/p6_1.jpg?'+timestamp,
			'image/p6_2.jpg?'+timestamp,
			'image/p6_3.jpg?'+timestamp,
			'image/p6_4.jpg?'+timestamp,
			'image/p6_5.jpg?'+timestamp,
			'image/p7_0.jpg?'+timestamp,
			'image/p7_1.jpg?'+timestamp,
			'image/p7_2.jpg?'+timestamp,
			'image/p7_3.jpg?'+timestamp,
			'image/p7_4.jpg?'+timestamp,
			'image/p7_5.jpg?'+timestamp,
			'image/p7_6.jpg?'+timestamp,
			'image/p8_0.jpg?'+timestamp,
			'image/p8_1.jpg?'+timestamp,
			'image/p8_2.jpg?'+timestamp,
			'image/p8_3.jpg?'+timestamp,
			'image/p8_4.jpg?'+timestamp,
			'image/p8_5.jpg?'+timestamp,
			'image/p9_0.jpg?'+timestamp,
			'image/p9_1.jpg?'+timestamp,
			'image/p9_2.jpg?'+timestamp,
			'image/p9_3.jpg?'+timestamp,
			'image/p9_4.jpg?'+timestamp,
			'image/p9_5.jpg?'+timestamp,
			'image/p10_0.jpg?'+timestamp,
			'image/p10_1.jpg?'+timestamp,
			'image/p10_2.jpg?'+timestamp,
			'image/p10_3.jpg?'+timestamp,
			'image/p10_4.jpg?'+timestamp,
			'image/p10_5.jpg?'+timestamp,
			'image/p11_0.jpg?'+timestamp,
			'image/p11_1.jpg?'+timestamp,
			'image/p11_2.jpg?'+timestamp,
			'image/p11_3.jpg?'+timestamp,
			'image/p11_4.jpg?'+timestamp,
			'image/p11_5.jpg?'+timestamp,
			'image/p12_0.jpg?'+timestamp,
			'image/p12_1.jpg?'+timestamp,
			'image/p12_2.jpg?'+timestamp,
			'image/p12_3.jpg?'+timestamp,
			'image/p12_4.jpg?'+timestamp,
			'image/p12_5.jpg?'+timestamp,
			'image/p12_6.jpg?'+timestamp,
			'image/p12_7.jpg?'+timestamp,
			'image/p12_8.jpg?'+timestamp,
			'image/p12_9.jpg?'+timestamp,
			'image/p12_10.jpg?'+timestamp,
			'image/share.png?'+timestamp,
			'image/supermamusic.mp3?'+timestamp+'@',
			//'image/supermamusic.ogg?'+timestamp,
		],
		onStart : function(total){
			$('.loading').show();
			$('.play').hide();
		},
		onProgress : function(current, total){
			var percent = current/total*100;
			$('.txt').html(parseInt(percent)+'%');	
			
		},
		onComplete : function(total){
			$('.loading').hide();
			$('.play').show();
			setTimeout(function(){timer = setInterval("showimage()",500);}, 500);			
		}
	});	
	$(document).ready(function(){
		loader.start();
	});
	</script>
	<link rel="stylesheet" type="text/css" href="js/index.css">	
</head>
<body>
	<div style='margin:0 auto;display:none;'>
		<img src='image/share.png' />
	</div>
 	<div class="loading">
		<div class="wait">
	  		<!--加载-->
	  		<span class="txt">0%</span>
		</div>
 	</div>
 	<div class="play">
 		<div class="play-tu">
 			<img class="tu" alt="图片加载中" src="">
 			<!--主题图片-->
 		</div>
 		<a class="play-btn">
			<span class="txt1">长按这里,继续播放</span>
		</a>
		<a class="play-back">
			<!--看累了,返回-->
		</a>
		<a class="play-music">
			<!--播放音乐-->
		</a>	
		<!-- 音效 -->
	 	<audio id="audio0" preload="auto" loop>
  			<source src="image/supermamusic.mp3" type="audio/mpeg"></source>			
		</audio>
	</div>
</body>
</html>

js部分:

//屏幕的高宽		
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var tutime = 0;//播放时间
var tuflag = 0;//计时标志位
var angle = 0;
var usermusic = 1;
var playmusic  = 0;
// 只能使用微信内置的浏览器才能打开
var useragent = navigator.userAgent;
//if (useragent.match(/MicroMessenger/i) != 'MicroMessenger')
////|| useragent.indexOf("iPad") != -1) 
//{
//	alert('已禁止本次访问:您必须使用手机微信内置浏览器访问本页面!');
//	var opened = window.open('about:blank', '_self');
//	opened.opener = null;
//	opened.close();
//}
//音乐控制按钮
//$(".play-music").attr("onclick", "musiccontr()");
function  musiccontr(){
	 if(usermusic==0){usermusic=1;return 1;}
	 if(usermusic==1){usermusic=0;return 1;}
}
setInterval("musiccontr1()", 600);
function musiccontr1(){
	if(playmusic==1 && usermusic==1){
    angle +=20;
    $('.play-music').rotate(angle);
	}
}
//按下播放  
//松开停止
$(function(){
	$(".play-btn").on({
		touchstart: function(e){
		 	e.preventDefault();
		 	$(".play-btn").css({"-webkit-animation":"bing"});
		 	$(".play-btn").css({"opacity":"0"});
		 	$(".play-back").css({"opacity":"0"});
		 	tuflag = 1;
		 	if(usermusic==1){
		 		playmusic = 1;
		 		document.getElementById("audio0").play();
		 	}
		},
		touchmove: function(){

		},
		touchend: function(){
			$(".play-btn").css({"-webkit-animation":"twinkling 1s infinite ease-in-out"});
			$(".play-music").css({"opacity":"1"});
			$(".play-back").css({"opacity":"1"});
			$(".play-music").attr("onclick", "musiccontr()");
			tuflag = 0;
			playmusic = 0;
			document.getElementById("audio0").pause();
		}
	})
});
//根据时间来加载图片
function showimage(){
	//根据计数标志位来计时,每500ms,stutime加一。
	if(tuflag===1){
		tutime++;
	}
	if(tutime<27){
		switch(tutime)
		 {
		 case 0:
			 $(".tu").attr('src','image/p1_0.jpg'); 
		 break;
		 case 2:
			 $(".tu").attr('src','image/p1_1.jpg');
		 break;
		 case 4:
			 $(".tu").attr('src','image/p1_2.jpg');
		 break;
		 case 6:
			 $(".tu").attr('src','image/p1_3.jpg');
		 break;
		 case 8:
			 $(".tu").attr('src','image/p1_4.jpg');
		 break;	
		 case 10:
			 $(".tu").attr('src','image/p1_5.jpg');
		 break;
		 case 12:
			 $(".tu").attr('src','image/p2_0.jpg');
		 break;		 
		 case 14:
			 $(".tu").attr('src','image/p2_1.jpg');
		 break;	
		 case 16:
			 $(".tu").attr('src','image/p2_2.jpg');
		 break;	
		 case 18:
			 $(".tu").attr('src','image/p2_3.jpg');
		 break;	
		 case 20:
			 $(".tu").attr('src','image/p2_4.jpg');
		 break;	
		 case 22:
			 $(".tu").attr('src','image/p2_5.jpg');
		 break;	
		 case 24:
			 $(".tu").attr('src','image/p2_6.jpg');
		 break;	
		 case 26:
			 $(".tu").attr('src','image/p2_7.jpg');
		 break;	
		 }
	}
	if(tutime>27 && tutime<55){
		switch(tutime){ 
		 case 28:
			 $(".tu").attr('src','image/p3_0.jpg');
		 break;	
		 case 30:
			 $(".tu").attr('src','image/p3_1.jpg');
		 break;	 
		 case 32:
			 $(".tu").attr('src','image/p3_2.jpg');
		 break;	
		 case 34:
			 $(".tu").attr('src','image/p3_3.jpg');
		 break;	
		 case 36:
			 $(".tu").attr('src','image/p3_4.jpg');
		 break;	
		 case 38:
			 $(".tu").attr('src','image/p3_5.jpg');
		 break;	
		 case 40:
			 $(".tu").attr('src','image/p4_0.jpg');
		 break;	
		 case 42:
			 $(".tu").attr('src','image/p4_1.jpg');
		 break;
		 case 44:
			 $(".tu").attr('src','image/p4_2.jpg');
		 break;	
		 case 46:
			 $(".tu").attr('src','image/p4_3.jpg');
		 break;
		 case 48:
			 $(".tu").attr('src','image/p4_4.jpg');
		 break;	
		 case 50:
			 $(".tu").attr('src','image/p4_5.jpg');
		 break;	
		 case 52:
			 $(".tu").attr('src','image/p4_6.jpg');
		 break;
		 case 54:
			 $(".tu").attr('src','image/p4_7.jpg');
		 break;
		}
	}
	if(tutime>55 && tutime<83){
		switch(tutime){
		 case 56:
			 $(".tu").attr('src','image/p5_0.jpg');
		 break;	
		 case 58:
			 $(".tu").attr('src','image/p5_1.jpg');
		 break;
		 case 60:
			 $(".tu").attr('src','image/p5_2.jpg');
		 break;
		 case 62:
			 $(".tu").attr('src','image/p5_3.jpg');
		 break;	 
		 case 64:
			 $(".tu").attr('src','image/p5_4.jpg');
		 break;	
		 case 66:
			 $(".tu").attr('src','image/p5_5.jpg');
		 break;	
		 case 68:
			 $(".tu").attr('src','image/p5_6.jpg');
		 break;	
		 case 70:
			 $(".tu").attr('src','image/p5_7.jpg');
		 break;	
		 case 72:
			 $(".tu").attr('src','image/p6_0.jpg');
		 break;	
		 case 74:
			 $(".tu").attr('src','image/p6_1.jpg');
		 break;	
		 case 76:
			 $(".tu").attr('src','image/p6_2.jpg');
		 break;
		 case 78:
			 $(".tu").attr('src','image/p6_3.jpg');
		 break;
		 case 80:
			 $(".tu").attr('src','image/p6_4.jpg');
		 break;	 
		 case 82:
			 $(".tu").attr('src','image/p6_5.jpg');
		 break;	
		}
	}
	if(tutime>83 && tutime<109){
		switch(tutime){
		 case 84:
			 $(".tu").attr('src','image/p7_0.jpg');
		 break;	
		 case 86:
			 $(".tu").attr('src','image/p7_1.jpg');
		 break;	
		 case 88:
			 $(".tu").attr('src','image/p7_2.jpg');
		 break;	
		 case 90:
			 $(".tu").attr('src','image/p7_3.jpg');
		 break;
		 case 92:
			 $(".tu").attr('src','image/p7_4.jpg');
		 break;	 
		 case 94:
			 $(".tu").attr('src','image/p7_5.jpg');
		 break;
		 case 96:
			 $(".tu").attr('src','image/p7_6.jpg');
		 break;	
		 case 98:
			 $(".tu").attr('src','image/p8_0.jpg');
		 break;	
		 case 100:
			 $(".tu").attr('src','image/p8_1.jpg');
		 break;	
		 case 102:
			 $(".tu").attr('src','image/p8_2.jpg');
		 break;	
		 case 104:
			 $(".tu").attr('src','image/p8_3.jpg');
		 break;
		 case 106:
			 $(".tu").attr('src','image/p8_4.jpg');
		 break;	 
		 case 108:
			 $(".tu").attr('src','image/p8_5.jpg');
		 break;
		}
	}	
	if(tutime>109 && tutime<133){
		switch(tutime){
		 case 110:
			 $(".tu").attr('src','image/p9_0.jpg');
		 break;	
		 case 112:
			 $(".tu").attr('src','image/p9_1.jpg');
		 break;	
		 case 114:
			 $(".tu").attr('src','image/p9_2.jpg');
		 break;	
		 case 116:
			 $(".tu").attr('src','image/p9_3.jpg');
		 break;
		 case 118:
			 $(".tu").attr('src','image/p9_4.jpg');
		 break;	 
		 case 120:
			 $(".tu").attr('src','image/p9_5.jpg');
		 break;
		 case 122:
			 $(".tu").attr('src','image/p10_0.jpg');
		 break;	
		 case 124:
			 $(".tu").attr('src','image/p10_1.jpg');
		 break;	
		 case 126:
			 $(".tu").attr('src','image/p10_2.jpg');
		 break;	
		 case 128:
			 $(".tu").attr('src','image/p10_3.jpg');
		 break;
		 case 130:
			 $(".tu").attr('src','image/p10_4.jpg');
		 break;	 
		 case 132:
			 $(".tu").attr('src','image/p10_5.jpg');
		 break;
		}
	}		
	if(tutime>133){
		switch(tutime){
		 case 134:
			 $(".tu").attr('src','image/p11_0.jpg');
		 break;	
		 case 136:
			 $(".tu").attr('src','image/p11_1.jpg');
		 break;	
		 case 138:
			 $(".tu").attr('src','image/p11_2.jpg');
		 break;	
		 case 140:
			 $(".tu").attr('src','image/p11_3.jpg');
		 break;	
		 case 142:
			 $(".tu").attr('src','image/p11_4.jpg');
		 break;
		 case 144:
			 $(".tu").attr('src','image/p11_5.jpg');
		 break;
		 case 146:
			 $(".tu").attr('src','image/p12_0.jpg');
		 break;	 
		 case 148:
			 $(".tu").attr('src','image/p12_1.jpg');
		 break;	
		 case 150:
			 $(".tu").attr('src','image/p12_2.jpg');
		 break;	
		 case 152:
			 $(".tu").attr('src','image/p12_3.jpg');
		 break;	
		 case 154:
			 $(".tu").attr('src','image/p12_4.jpg');
		 break;	
		 case 156:
			 $(".tu").attr('src','image/p12_5.jpg');
		 break;
		 case 158:
			 $(".tu").attr('src','image/p12_6.jpg');
		 break;	 
		 case 160:
			 $(".tu").attr('src','image/p12_7.jpg');
		 break;	
		 case 162:
			 $(".tu").attr('src','image/p12_8.jpg');
		 break;	
		 case 164:
			 $(".tu").attr('src','image/p12_9.jpg');
		 break;	
		 case 166:
			 $(".tu").attr('src','image/p12_10.jpg');
		 break;	
		}
	}	
//	 default:
//		 clearInterval(timer);    
//	 	 alert("程序结束了");	 
}

css部分:

 

@CHARSET "UTF-8";
.loading{
	background-color: black;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0rem;
	left:0rem;
	display: block;
}
.play{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0rem;
	left:0rem;
	display: block;
	z-index: 100;
}
.play-btn{
	position: absolute;
	left:50%;
	display: block;
}
.wait{
	background: url("data:image/gif;base64,R0lGODlhgAIMBPf/AKvk79T3+Kri7ann57Hi9K/k8rLj9M7a2+v07rjl+7yoa5m6nKWBtsPfVq+8eO/ThEh5ELDh4G2wyEOpiiIgAAA7") no-repeat;
	background-size:100% 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0%;
	left:0%;
	z-index: 11;
	display: block;
}
.txt {
	font-size:1.2rem;
	color:#696969;
	width: 100%;
	display: block;
	text-align: center;
	bottom:30%;
	position:absolute;
}
.txt1{
	font-size:0.875rem;
	color:black;
	width: 10rem;
	display: block;
	text-align: center;
	margin-left: -3.3rem;
	position: absolute;
	top:-1.9rem;
	font-weight:bold;
}
.play-btn{
	background: url(image/finger.png) no-repeat;
	background-size:100% 100%;
	width: 3.56rem;
	height: 3.56rem;
	bottom:1rem;
	margin-left: -1.78rem;	
	-webkit-animation:twinkling 3s infinite ease-in-out;
	-webkit-touch-callout:none;
}

@-webkit-keyframes twinkling {
    0% { opacity: 0; }
    25% { opacity: 0.3; }
    50% { opacity: 0.7; }
    75% { opacity: 0.9; }
    100% { opacity: 1; }
}

.play-back{
	background: url(image/nai.png) no-repeat;
	background-size:100% 100%;
	width: 7rem;
	height: 3rem;
	bottom: 0rem;
	left: 0rem;
	position: absolute;
}
.play-music{
	background: url(image/yinyue.png) no-repeat;
	background-size:100% 100%;
	width: 3rem;
	height: 3rem;
	top: 0rem;
	right: 0rem;
	position: absolute;
}

.play-btn:before{
	content:"";
	background: url(image/finger1.png) no-repeat;
	background-size:100% 100%;
	width: 0.75rem;
	height: 0.44rem;
	top:-0.7rem;
	margin-left: 1.4rem;
	position: absolute;
}
.play-tu,.tu{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0rem;
	left:0rem;
	display: block;
	-webkit-touch-callout:none;
}	

 

 

也可以访问的个人网站:http://www.zczzxz.top​​​​​​​

 

 

 

 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页