这篇文章主要介绍了jquery转盘抽奖功能实现，实现的效果是九宫格大转盘抽奖，应用特别广泛的转盘抽奖方式，感兴趣的小伙伴们可以参考一下
一、用到的素材
二、代码如下，重点是js部分
<a href="https://www.kunjuke.com/tag/170/" title="jQuery" target="_blank">jQuery</a>九宫格大转盘抽奖 #lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;} #lottery table{background-color:yellow;} #lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999} #lottery table td img{display:block;width:190px;height:170px;} #lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url(images/lottery1.jpg-600) no-repeat top center;} #lottery table td a:hover{background-image:url(images/lottery2.jpg-600);} #lottery table td.active .mask{display:block;} .mask{ width:100%; height:100%; position:absolute; left:0; top:0; background:url(images/mask.png-600) no-repeat; display:none; }
效果如下：
三、注意事项
.mask开始如下，用的是rgba，但是IE8不兼容，改为使用png图片background:url(images/mask.png-600) no-repeat;
.mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(252,211,4,0.5); display: none }
希望大家可以从小编整理的这篇文章中有所收获，对大家实现抽奖功能有所帮助。
以上就是jquery转盘抽奖功能实现的详细内容，更多请关注本站其它相关文章！
