A1页面 记录为5条，可滑动查看更多（整体一屏），按钮文字也需要可编辑

A1页面“已领取红包0元”为可编辑文本，字体“方正正大黑简体”

A1页面点击图层“领取红包”按钮，展示弹出层，完成A2-A3-A4的红包打开动画+支付宝进帐的声音，点击恭喜发财和“关闭”是一个功能，即关闭弹出层

html

<div class="ui-dialog ui-pocket-dialog"  style="display: none;padding: 0;" id="picketDialog"> 
			<div class="close"></div>
			<div class="pocket-modal">
				<div class="pocket-value">
					<div class="text">恭喜您获得</div>
					<div class="value">20元</div>
				</div>
				<div class="pocket-top"></div>
				<div class="pocket-bao"></div>
				<div class="pocket-circle"></div>
				<div class="pocket-body"></div>
				<div class="btn btn-open"></div>
				<div class="btn btn-light">恭喜发财</div>
				<div class="btn-modal-close"></div>
				<div class="audio-box">
					<audio id="myaudio" controls>
					  <source src="mp3/zhifubao.mp3" type="audio/ogg">
					  <source src="mp3/zhifubao.mp3" type="audio/mpeg">
					</audio>
				</div>
			</div>
		</div>

js

// 红包
			$('.pocket-link').click(function(){
				mask.fadeIn('fast')
				$('#picketDialog').fadeIn('fast')
				$('#picketDialog .pocket-modal').addClass('bounceShow').addClass('animated')
			})
			function autoPlay(){
				var myAuto = document.getElementById('myaudio');
				myAuto.play();
			}
			function step(){
				var myAuto = document.getElementById('myaudio');
				myAuto.step();
			}
			$('.btn-open').click(function(){
				$(this).parents('.ui-dialog').addClass('open')
				setTimeout(function () {
				   autoPlay()
				}, 1000);
			})
			$('.btn-modal-close,.ui-pocket-dialog .close').click(function(){
				mask.fadeOut('fast')
				$(this).parents('.ui-dialog').fadeOut('fast')
				$('#picketDialog .pocket-modal').removeClass('bounceShow').removeClass('animated')
				$('.ui-pocket-dialog').removeClass('open')
			})

效果图