抽奖示例

运行样式：

代码和注释参考代码中：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        body {
            background-image: url(cjbg.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }

        * {
            margin-left: 0;
            padding-left: 0;
        }

        #title {
            width: 560px;
            height: 321px;
            margin: 200px auto 0 auto;
        }

        .shanDeng, .shanDeng2 {
            width: 858px;
            height: 858px;
            background-size: 100%;
            background-repeat: no-repeat;
            margin: 88px auto 0 auto;
        }

        .shanDeng {
            background-image: url(shandeng1.png);
        }

        .shanDeng2 {
            background-image: url(shandeng2.png);
        }

        #btn .cjBtnDom, #btn .cjBtn, .shanDeng .active, .shanDeng td {
            width: 140px;
            height: 140px;
            background-repeat: no-repeat;
            background-size: 100%;
        }

        #btn.cjBtn {
            background-image: url(buttonUp.png);
        }

        #btn.cjBtnDom {
            background-image: url(buttonDown.png);
        }


        #luck .active {
            background-image: url(active.png);
        }

        .shanDeng td {
            text-align: center;
            background-image: url(proBj.png);
        }

        .shanDeng table {
            padding-left: 63px;
            padding-top: 63px;
        }
    </style>
</head>
<body>
    <div class="shanDeng" id="deng1">
        <div id="luck">
            <!-- luck -->
            <table>
                <tbody>
                    <tr>
                        <td class="luck-unit luck-unit-0"><img src="1.png"></td>
                        <td class="luck-unit luck-unit-1"><img src="3.png"></td>
                        <td class="luck-unit luck-unit-2"><img src="0.png"></td>

                    </tr>
                    <tr>
                        <td class="luck-unit luck-unit-7"><img src="2.png"></td>
                        <td class="cjBtn" id="btn"></td>
                        <td class="luck-unit luck-unit-3"><img src="5.png"></td>
                    </tr>
                    <tr>
                        <td class="luck-unit luck-unit-6"><img src="6.png"></td>
                        <td class="luck-unit luck-unit-5"><img src="4.png"></td>
                        <td class="luck-unit luck-unit-4"><img src="7.png"></td>
                    </tr>
                </tbody>
            </table>
        </div><!-- luckEnd -->
    </div>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        var luck = {
            index: -1,    //当前转动到哪个位置，起点位置
            count: 0,    //总共有多少个位置
            timer: 0,    //setTimeout的ID，用clearTimeout清除
            speed: 20,    //初始转动速度
            times: 0,    //转动次数
            cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: -1,    //中奖位置
            init: function (id) {
                if ($("#" + id).find(".luck-unit").length > 0) {
                    $luck = $("#" + id);
                    $units = $luck.find(".luck-unit");
                    this.obj = $luck;
                    this.count = $units.length;
                    $luck.find(".luck-unit-" + this.index).addClass("active");
                };
            },


            roll: function () {
                var index = this.index;
                var count = this.count;
                var luck = this.obj;
                $(luck).find(".luck-unit-" + index).removeClass("active");
                index += 1;
                if (index > count - 1) {
                    index = 0;
                };
                $(luck).find(".luck-unit-" + index).addClass("active");
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };


        function roll() {
            luck.times += 1;
            luck.roll();
            if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
                clearTimeout(luck.timer);
                luck.prize = -1;
                luck.times = 0;
                click = false;
            } else {
                if (luck.times < luck.cycle) {
                    luck.speed -= 10;
                } else if (luck.times == luck.cycle) {
                    var index = Math.random() * (luck.count) | 0;
                    luck.prize = index;
                } else {
                    if (luck.times > luck.cycle + 10 && ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
                        luck.speed += 110;
                    } else {
                        luck.speed += 20;
                    }
                }
                if (luck.speed < 40) {
                    luck.speed = 40;
                };

                luck.timer = setTimeout(roll, luck.speed);
            }
            return false;
        }


        //闪灯效果
        var num = 0;
        $(".shanDeng").attr("class", function () {
            setInterval(function () {
                num++;
                if (num % 2 == 0) {
                    $('#deng').addClass("shanDeng2");
                } else {
                    $('#deng').addClass("shanDeng");
                    $('#deng').removeClass('shanDeng2');
                }
            }, 500)
        })


        var click = false;
        window.onload = function () {
            luck.init('luck');
            $("#btn").click(function () {
                //按下弹起效果
                $("#btn").addClass("cjBtnDom");
                setTimeout(function () {
                    $("#btn").removeClass("cjBtnDom");
                }, 200);


                if (click) {
                    return false;
                }
                else {
                    luck.speed = 100;
                    roll();
                    click = true;
                    return false;
                }

            });
        };
    </script>
</body>
</html>

<script type="text/javascript">
    function stops() {
        return false;
    }
    document.oncontextmenu = stops;
</script>
View Code

下载地址：

 https://files.cnblogs.com/files/kennyliu/Lucky.rar

posted @ 2017-02-10 15:15  kanek  阅读(253)  评论(0)  编辑  收藏  举报