jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

需求:

最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路)。

效果如下:

一、页面结构:

您已拥有次抽奖机会,点击立刻抽奖!~

标签h2为提示内容,.playnum是剩余抽奖次数,.g-lottery-img是最外层的闪灯,.g-lottery-img是转动的内容,.playbtn是点击抽奖按钮。

这里用的是jquery.rotate.js,所以要引入jquery然后引入jquery.rotate.js,百度一下很简单的,没几个AIP。

二、简单的样式:

样式就定一下高度,居中一下,显示一下背景图片

三、JS代码:

说到底就是用一个1~6的随机数,然后把对应的角度值传给jquery.rotate.js,它就会转到相应的地方,最后做一下对应剩余次数的判断和修改。

最后所有代码为:




  
  抽奖
  
  
  
  
  


您已拥有次抽奖机会,点击立刻抽奖!~

所需要的图片(这里好像上传不了压缩文件,所以不能整个打包上传了):

#复制下面的图片名称-鼠标移到图片上-右键-图片另存为-粘贴保存#

1.最外面的闪灯:ly-plate-c.gif

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码_第1张图片

2.六个中奖内容:bg-lottery.png

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码_第2张图片

3.点击抽奖按钮: playbtn.png

jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码_第3张图片

总结

以上所述是小编给大家介绍的jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

你可能感兴趣的:(jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码)