前端开发抽奖活动特效

手机游戏开发前端
unity 开发游戏前端吗
web前端可以开发游戏吗

在公司闲的时候做了一个抽奖活动,只做移动端兼容的,如果要做PC端低版本浏览器,因为backgroundPositionY不兼容一些浏览器,如果要兼容的话,记得好像要下载一个background-position.js插件….

 

代码片段 1

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>抽奖</title>
        <meta
            name=”viewport”
            content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”
        />
        <script
            type=”text/javascript”
            src=”http://www.update8.com/images/js/jquery.min.js”
        ></script>
        <script
            type=”text/javascript”
            src=”http://fm.ttpod.com/js/vendor/jquery.easing/jquery.easing.1.3.min.js”
        ></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                overflow-x: hidden;
            }
            body {
                position: relative;
                background: #fff;
                min-width: 320px;
            }
            #lottery {
                width: 320px;
                margin: 50px auto;
            }
            .lotyList {
                text-align: center;
            }
            .lotyList .num {
                display: inline-block;
                width: 90px;
                height: 150px;
                border: 1px solid blue;
                text-align: center;
                background: url(http://www.update8.com/uploads/141110/1-141110150Q0637.png)
                    repeat-y;
                background-size: 90px auto;
                margin: 0 3px;
            }
            .lotyBtn {
                text-align: center;
                margin-top: 40px;
            }
            .lotyBtn span {
                display: inline-block;
                padding: 10px 70px;
                background-color: #ff0000;
                color: #fff;
                border-radius: 4px;
            }
            .lotyBtn span.gray {
                background-color: #c1c1c1;
            }
        </style>
    </head>
    <body>
        <div id=”lottery”>
            <div class=”lotyList”></div>
            <div class=”lotyBtn”><span>开始摇奖啦</span></div>
        </div>
        <script type=”text/javascript”>
            var lottery = function(param) {
                defalut = {}
                defalut.num = randomNum()
                var opt = $.extend({}, defalut, param)
                this.init(opt)
                //console.log(opt.num)
            }
            lottery.prototype = {
                init: function(opt) {
                    var o = opt,
                        numStr = o.num.toString().split(”)
                    ;(this.numArr = numStr),
                        (this.len = numStr.length),
                        (this.flat = 1),
                        this.num(),
                        this.btn()
                },
                num: function() {
                    var span = ”
                    for (var i = 0; i < this.len; i++) {
                        span += ‘<span class=”num”></span>’
                    }
                    $(‘.lotyList’).html(span)
                },
                btn: function() {
                    var btn = $(‘.lotyBtn’).find(‘span’),
                        me = this
                    this.myBtn = btn
                    btn.on(‘click’, function() {
                        if (me.flat == 1) {
                            me.flat = 0
                            btn.addClass(‘gray’), me.go()
                        } else if (me.flat == 2) {
                            alert(‘你已经抽过了…’)
                        }
                    })
                },
                go: function() {
                    var span = $(‘.lotyList’).children(‘.num’),
                        spanHeight = span.get(0).clientHeight,
                        me = this
                    $.each(span, function(i, n) {
                        setTimeout(function() {
                            $(n)
                                .stop()
                                .animate(
                                    {
                                        backgroundPositionY:
                                            50 * spanHeight –
                                            me.numArr[i] * spanHeight,
                                    },
                                    {
                                        duration: 2000 + i * 3000,
                                        easing: ‘easeOutElastic’,
                                        complete: function() {
                                            if (parseInt(i + 1) == me.len) {
                                                alert(‘抽奖完成’)
                                                me.myBtn.removeClass(‘gray’),
                                                    (me.flat = 2)
                                            }
                                        },
                                    },
                                )
                        }, i * 300)
                    })
                },
            }
            function randomNum() {
                var min = 111,
                    max = 999
                return parseInt(Math.random() * (max – min) + 100)
            }
            new lottery({ num: 551 })
        </script>
    </body>
</html>
小游戏前端开发
前端和游戏开发
web前端小游戏开发
» 本文来自:前端开发者 » 《前端开发抽奖活动特效》
» 本文链接地址:https://www.rokub.com/7609.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!