圆盘和方形抽奖插件

2022年02月25日 阅读115次 分类:资源 标签:js资源

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/resource/1209.html

圆盘抽奖

这个组件初始状态不指向奖品,而是指向缝隙

loteryround.js

Api

参数:


名称 描述
length
奖品数量
el 容器ID


属性:

playing 是否正在动画中

方法:

playto(n,callback) 旋转到第n个奖品,旋转结束运行callback回调

代码示例

<div id="ltpanel" class="panel"></div>

<script src="/js/zepto/zepto.min.js"></script>
<script src="/loteryround.min.js"></script>
<script>
    // 转盘初始化
    // 第一个参数是奖品的个数
    // 第二个是用来旋转的圆盘(指针不动)
    var panel=new PanelLotery({
        length:8, //奖项数量   
        //duration:5000, //动画的时间,默认5秒,可不填
        el:'#ltpanel'
    });

    $('.panel-btn').on('click', function(event) {
        event.preventDefault();        
      if(panel.playing) return;        
      // 这里是演示随机转到奖品n
      // 初始的指针右侧开始
      // 顺时针方向开始算
      // 第一个奖品是n=0
      var n=Math.floor(Math.random()*8);        
      console.log(n);
      panel.playto(n,function(){
        alert(n);
      });
    });
</script>

方形抽奖(同时支持圆形)

原生 JavaScript 抽奖组件,支持rem移动端适配,无框架依赖。

lottery.js

Api

参数:

名称 类型 默认值 描述
lighturl string '' 外部光圈图片
starturl string '' 外部按钮图片
width number 800 宽度
height number 660 高度
total number 18 抽奖产品的总数
sbtnx number 239 开始抽奖按钮的位置x坐标
sbtny number 130 开始抽奖按钮的位置y坐标
sbtnw number 320 开始抽奖按钮的宽度
sbtnh number 100 开始抽奖按钮的高度
boxw number 100 奖品光效的宽度
boxh number 100 奖品光效的高度
position string "19_20, 128_20, 348_19, 569_239, 679_239" 奖品光效的位置,对应奖品图片的布局,填入每个奖品的位置以及角度用逗号分割x_y_rotation(角度为0的可以不填写)例如19_20或者19_20_0表示第一个奖品的位置x坐标为19px y坐标为20px角度为0。)
contentId string 容器 嵌入抽奖模块的div层的id
onClickRollEvent function
点击开始的回调事件
onCompleteRollEvent function
完成的回调事件
b string null 圆盘的图片,不填时 自动载入容器“contentId”下第一张图片
s string null 开始抽奖按钮图片
bx number null 圆盘的图片位置x坐标(转盘的中心点坐标为(0,0))
by number null 圆盘的图片位置y坐标
sx number null 开始抽奖按钮x坐标
sy number null 开始抽奖按钮y坐标
sw
number 100 开始抽奖按钮宽度
sh number 100 开始抽奖按钮高度
unit string px 尺寸单位

方法:

enable() 禁用
disable() 启用
stopRoll(index) 停止到所在的位置,在onClickRollEvent事件中调用。

reset() 重置

代码示例

方形示例

<div id="lotterycontent">
    <img src="bg.png" style="">
</div>

<script src="/js/delottery/lottery.js"></script>
<script>
    //开始抽奖
    function callJsToStart(lotteryObj){
        // 这里是演示随机转到奖品0~9的一个数字
        // 初始的指针右侧开始
        // 顺时针方向开始算
        // 第一个奖品是0
        var prize = Math.floor(Math.random() * 10);
        
        lotteryObj.stopRoll(prize)
    }
    
    //动画完成
    function callJsToComplete(prize){
        alert("你的奖品是:"+prize);
    }
     
    new Lottery({
        'lighturl':'/images/p3_lottery_cur.png',
        'total':10,
        'width':6.8,
        'height':4.99,
        'sbtnx':1.85,
        'sbtny':1.79,
        'sbtnw':3.09,
        'sbtnh':1.04,
        'boxw':1.51,
        'boxh':1.4,
        'position':"0.2_0.22,1.81_0.22,3.45_0.22,5.08_0.22,0.2_1.76,5.08_1.76,0.2_3.33,1.81_3.33,3.45_3.33,5.08_3.33",
        'contentId' : 'lotterycontent',
        'onClickRollEvent' : callJsToStart,
        'onCompleteRollEvent':callJsToComplete ,
        'unit':"rem",
        'isResponsive':0
    });
</script>

圆盘示例

这个组件初始化指向一个奖品

<div id="lotterycontent">
    <img src="bg.png" style="">
</div>

<script>
    new Lottery({
        'r':8,//奖品总数
        'width':488,//宽度
        'height':488,//高度
        's':'/images/lottery/circle/z.png',//开始抽奖按钮图片
        'bx':0,//圆盘的图片位置x坐标 (转盘的中心点坐标为(0,0))
        'by':0,//圆盘的图片位置y坐标
        'sx':0,//开始抽奖按钮x坐标
        'sy':0,//开始抽奖按钮y坐标
        'contentId' : 'lotterycontent',//容器层的 id 
        'onClickRollEvent' : callJsToStarto,//对应上面接口
        'onCompleteRollEvent':callJsToCompleteo //对应上面接口
    });
</script>


(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/resource/1209.html