jQuery大转盘game

所属分类:其他-游戏

 67754  361  查看评论 (12)
分享到微信朋友圈
X
jQuery大转盘game ie兼容9

js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下

queryRotate 这个插件就可以实现这个功能

jqueryRotate:

支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现

下面了解下这个插件怎么使用

$("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度
$("触发转动元素").getRotateAngle(); //返回对象当前的角度
$("触发转动元素").stopRotare(); //停止旋转动画
$("触发转动元素").rotateRight()向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。
$("触发转动元素").rotate({
      angle:0,  //起始角度
     animateTo:180,  //结束的角度
     duration:3000, //转动时间
     callback:function(){}, //回调函数
     easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果,需要引用jquery.easing.min.js的文件
  })
 
$("触发转动元素").rotate(45); //转动45
$("触发转动元素").getRotateAngle(); //返回对象当前的角度
$("触发转动元素").stopRotare(); //停止旋转动画

另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。

大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度例

  • 一等奖概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内 

  • 二等奖概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内

  • 三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内


相关插件-游戏

魔方插件,魔方游戏(原创)

上个插件上传成功了。突然就想到把我之前写的魔方插件也写上来。挺好玩的一个插件。完美地还原了现实中的魔方。
  游戏
 35363  385

vue跳跳棋游戏(原创)

新鲜出炉的原创跳跳棋游戏,基于vue.js实现,游戏的逻辑及实现方法在js中解释的很清楚,插件的调用也非常简单。
  游戏
 34827  342

jQuery随机批量抽奖

jQuery随机批量抽奖,随机抽取指定个数,公司年会抽奖专用,点击开始后开始抽奖 ,点击结束后结束抽奖
  游戏
 31187  323

jquery天天爱消除小游戏

jquery实现的简易版天天爱消除,简单效果好,功能自己扩展。
  游戏
 27655  306

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    7 0
    2018/10/28 13:29:30
    怎么样修改中奖概率呢 回复
    Randy Field 0
    2017/8/30 14:05:43

    要是盘盘动就好了。。。

    回复
    GLUB 0
    2017/5/2 15:19:06

    怎么设置奖励 我们转盘奖励度数不一样,哪儿设置对应的度数呢?亲

    回复
    叶子祝佳音 0
    2017/4/26 11:14:21

    怎么设置1,2,3等奖的概率?

    回复
    慕婕 0
    2017/1/3 10:01:03
    ぅ无路可退只能无言以对つ 0
    2016/12/13 10:12:16
    995914387 0
    2016/11/4 8:11:18
    I was too deep into the drama 0
    2016/10/26 9:10:17
    这个怎么设置点击次数? 回复
    山贼 0
    2016/5/10 12:05:52
    chengzi550 0
    2016/3/18 17:03:26
    听说回复就能下载了
        正在加载0
        2016/3/18 18:03:20
        really ??
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复