jQuery移动端抽奖大转盘插件

jQuery移动端抽奖大转盘插件

jQuery移动端抽奖大转盘插件,图片、文字、概率都可自设,移动端页面(pc需自行修改样式)代码注释全。

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

1
2
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>

动态添加大转盘的奖品与奖品区域背景颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
    $(document).ready(function(){
        turnplate.restaraunts = ["20积分", "足疗机", "20积分", "保温杯", "20积分", "手持式电熨斗", "20积分 ", "橄榄油", "20积分", "晴雨伞"];
        turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
        var rotateTimeOut = function (){
            $('#wheelcanvas').rotate({
                angle:0,
                animateTo:2160,
                duration:8000,
                callback:function (){
                    alert('网络超时,请检查您的网络设置!');
                }
            });
        };

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="jq22-content" style="margin-top: 58%;">
<img src="images/8.png" id="fen-img" style="display:none;" />
<img src="images/6.png" id="zuliao-img" style="display:none;" />
<img src="images/3.png" id="baowen-img" style="display:none;" />
<img src="images/5.png" id="yundou-img" style="display:none;" />
<img src="images/7.png" id="ganlan-img" style="display:none;" />
<img src="images/4.png" id="yusan-img" style="display:none;" />
<div class="banner">
<div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;">
<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
<img class="pointer" src="images/turnplate-pointer.png" />
</div>
</div>
</div>
<div id="sbtn">
<a href="#"><img src="images/btn-rule.png" alt=""></a>
<a href="#"><img src="images/btn-zjcx.png" alt=""></a>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论