HTML5仿手机QQ拆红包动画_JS抢红包游戏源代码

分享一个html5仿手机QQ拆红包游戏的源代码、已经封装好了、大家可以直接下载源代码集成到自己的项目里面、代码量非常小、非常适合做拆红包的活动、效果非常不错、下面是效果图片

HTML代码

<!-- 红包 -->
<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>
<!-- End 按钮 -->

JS代码

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

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1nt7wduh 密码: 3xcs