html5仿手机QQ拆红包游戏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5仿手机QQ拆红包游戏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>摇红包</title>

    <link rel="stylesheet" href="css/csshake.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/zepto.min.js"></script>
    <script src="js/red.js"></script>
</head>
<body>
    <!-- 红包 -->
    <div class="red">
        <!-- shake-chunk -->
        <span style="background-image: url(img/red-w.png);"></span>
        <button class="redbutton" type="领取红包">拆红包</button>
        <div class="red-jg">
            <h1>恭喜您！</h1>
            <h5>获得iPhone 6s 16g手机一部</h5>
        </div>
    </div>
    <!-- End 红包 -->
    <!-- 按钮 -->
    <div class="t-btn">
        <button>立即领取</button>
    </div>
</body>
</html>

JS代码(red.js):

/*---------------------------------------------------------/ ☀ 唐明明20151015 ☀/---------------------------------------------------------*/
$(document).ready(function(){
	// 点击redbutton按钮时执行以下全部 $('.redbutton').click(function(){
	// 在带有red样式的div中添加shake-chunk样式 $('.red').addClass('shake-chunk');
	// 点击按钮2000毫秒后执行以下操作 setTimeout(function(){
	// 在带有red样式的div中删除shake-chunk样式 $('.red').removeClass('shake-chunk');
	// 将redbutton按钮隐藏 $('.redbutton').css("display","none");
	// 修改red 下 span 背景图 $('.red > span').css("background-image","url(img/red-y.png)");
	// 修改red-jg的css显示方式为块 $('.red-jg').css("display","block");
}
,2000);
}
);
}
);

CSS代码(style.css):

/*---------------------------------------------------------/ ☀ 唐明明20151015 ☀/---------------------------------------------------------*/
button{border:none;}
/*红包*/
.red{width:60%;padding-top:100%;margin:20px 20%;position:relative;}
.red>span{width:100%;height:100%;background-size:100%;background-position:center;background-repeat:no-repeat;top:0;left:0;position:absolute;}
.red>button{position:absolute;top:38%;left:30%;font-size:14px;width:40%;height:24%;border-radius:100%;background:#fdc339;color:#fff;}
.red-jg{display:none;position:absolute;top:40%;text-align:center;padding:10px;}
.red-jg>h1{font-size:20px;color:#ffc000;line-height:40px;}
.red-jg>h5{color:#fff;}
/*按钮*/
.t-btn{padding:10px;}
.t-btn>button{width:100%;background:#ff4242;border-radius:5px;color:#fff;line-height:40px;font-size:14px;}

附件:下载该文件资源,减少时间成本(增值服务)