zoukankan      html  css  js  c++  java
  • 抽奖刮刮乐 使用文档

    js地址:http://marketing.lechebang.com/assets/cup/guaguale.js

    直接浏览器打开 ctrl+s

    效果图

     

    html:可以是任意你想使用的标签

    <div id="guaguale-canvas">
    </div>

    js:

    var guaguale=new Guaguale('#guaguale-canvas',{      

    radius:1,
    removePercent:0.3,
    cover:{
    type:'img',                                                                 
    cover:'./euro_files/imgs/awardcover.png',
    backgroundcolor:'#CCC',
    color:'#FFF',
    fontSize:'16px',
    fontStyle:'Bold',
    lineWidth:60
    },
    start:function(e){

      //开始滑动时你想处理的逻辑
    },
    move:function(){

      //刮动过程中你想处理的逻辑。
    },
    end:function(){

      //刮完以后你想处理的逻辑,比如你想将中奖结果回传服务器
    }

    });

    参数:

    ‘#guaguale-canvas’  对应的html标签选择器;

    radius: 画笔的半径,可不传,不传默认是10px;

    removePercent: 百分比 0到1之间, 擦除多少比例,自动全部清除画布,可不传(没有自动清除功能)

    cover:object 类型 (图片看不清的话,请右键新标签页打开查看)

      

    使用:

    guaguale.init(obj);

    obj为object类型,

    var obj={ready:false,totalLength:1,contents:[]};

    ready:bool型:true 可以刮开,false,不可以刮开。 如:刮奖次数没了,设置false 禁止用户刮开。

    totalLength: int 型, 刮奖内容页显示,可能有的内容有多行(如下图 左边totalLength=3 包括title 、兑换码、和再来一次按钮,右边totalLength=2)

    contents: 抽奖画布显示内容,为数组类型 以作图为例:

    obj.contents.push(
          {title:‘128元乐车邦优惠券’,x:1,y:0.9,type:'text',fontStyle:'#FF2A06'},
          {title:'兑换码:',x:0.5,y:1.6,type:'text',fontStyle:'#333'},
          {title:‘13’,x:1.23,y:1.6,type:'text',fontStyle:'#FF2A06'},
          {title:'再来一次',x1:0.7,y1:2,x2:1,y2:2.5,type:'button',coverStyle:'#FF5F44',fontStyle:'#fff'}
    );

    contents内容参数:

    title:显示内容

    x:0 ~ 1 内容据画布水平位置,以文字居中显示为基准调整x大小 ,eg: x=0.5时, 文字内容为画布中间位置*0.5 即 画布1/4 位置

    y:0~1 内容据画布垂直位置,eg:y=0.5时, 文字内容为画布高度*0.5 即 画布水平居中显示。

    type: text或者button  档位botton时 效果为上图再来一次按钮。

    fontStyle: 显示文字的颜色。

    coverStyle: 按钮背景色。

  • 相关阅读:
    Java5 多线程实践
    ExtJS2.0实用简明教程 Border区域布局
    MySQL安装图解
    ExtJS2.0实用简明教程 组件的使用
    ExtJS2.0实用简明教程 ExtJS版的Hello
    Linux操作系统中如何安装Tomcat
    线程池的介绍及简单实现
    ExtJS2.0实用简明教程 获得ExtJS
    汽车常识全面介绍 动力系统
    MySQL 图形化管理工具介绍
  • 原文地址:https://www.cnblogs.com/kangaoxiaoshi/p/5569299.html
Copyright © 2011-2022 走看看