HTML5仿手机QQ拆红包动画_JS抢红包游戏源代码
2015-10-26 09:23:12  By: dwtedx

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

html5拆红包代码


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+