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

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

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

二、简单的样式:

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

三、JS代码:

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

最后所有代码为:



  
  抽奖
  
  
  
  
  



  
    
      

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

                                                

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

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

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

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

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

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

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

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

感谢你能够认真阅读完这篇文章,希望小编分享的“jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享名称:jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖
浏览路径:http://wjwzjz.com/article/pohsih.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP