jQuery 9宫格抽奖插件

jQuery 9宫格抽奖插件

jQuery 9宫格抽奖插件,移动端、电脑端都可以,代码注释全,请在移动端预览查看最佳展示效果!

使用方法
在页面引入JS代码文件

1
2
3
4
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/h5_game_common.js?version=1.0.0"></script>
<script src="js/index.js?version=1.0.0"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<div id="wrap">
    <p class="time">3.10-3.25</p>
    <div class="title">随手狂欢&nbsp;&nbsp;全年最赚</div>
    <!--星星-->
    <div class="stars-box">
        <span class="stars"></span>
        <span class="stars"></span>
        <span class="stars"></span>
        <span class="stars"></span>
        <span class="stars"></span>
        <span class="stars"></span>
        <span class="stars"></span>
    </div>
    <!--主体-->
    <div class="main">
        <p class="rule"></p>
        <a href="../my.html" id="myWin">
            <p class="my"></p>
        </a>
        <!--游戏区域-->
        <div class="box">
            <span class="coin"></span>
            <h2>您今日还有 <span id="change"> 3 </span> 次抽奖机会</h2>
            <ul class="light clearfix">
                <li class="fl">
                    <p></p>
                    <p class="blin"></p>
                    <p></p>
                    <p class="blin"></p>
                </li>
                <li class="fr">
                    <p class="blin"></p>
                    <p></p>
                    <p class="blin"></p>
                    <p></p>
                </li>
            </ul>
            <!--九宫格-->
            <ul class="play clearfix">
                <li class="prize select">
                    <div>
                        <p>一等奖</p>
                    </div>
                </li>
                <li class="prize">
                    <div>
                        <p>二等奖</p>
                    </div>
                </li>
                <li class="prize">
                    <div>
                        <p>三等奖</p>
                    </div>
                </li>
                <li>
                    <div>
                        <p>谢谢参与</p>
                    </div>
                </li>
                <!--开始按钮-->
                <li id="btn"></li>
                <!--开始按钮-->
                <li class="prize">
                    <div>
                        <p>一等奖</p>
                    </div>
                </li>
                <li class="prize">
                    <div>
                        <p>88一等奖</p>
                    </div>
                </li>
                <li>
                    <div>
                        <p>一等奖</p>
                    </div>
                </li>
                <li class="prize">
                    <div>
                        <p>一等奖</p>
                    </div>
                </li>
            </ul>
        </div>
        <!--奖品展示-->
        <div class="awards">
            <p>一等奖:iPhone XR 一台</p>
            <p>一等奖:iPhone XR 一台</p>
            <p>一等奖:iPhone XR 一台</p>
            <p>一等奖:iPhone XR 一台</p>
        </div>
    </div>
    <!--游戏规则弹窗-->
    <div id="mask-rule">
        <div class="box-rule">
            <span class="star"></span>
            <h2>活动规则说明</h2>
            <span id="close-rule"></span>
            <div class="con">
                <div class="text">
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                </div>
            </div>
        </div>
    </div>
    <!--中奖提示-->
    <div id="mask">
        <div class="blin"></div>
        <div class="caidai"></div>
        <div class="winning">
            <div class="red-head"></div>
            <div class="red-body"></div>
            <div id="card">
                <a href="" target="_self" class="win" rel="noopener noreferrer"></a>
            </div>
            <a href="" target="_self" class="btn" rel="noopener noreferrer"></a>
            <span id="close"></span>
        </div>
    </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论