jquery实现九宫格大转盘抽奖

网络编程 2024/11/20 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

下面我们来分享一个九宫格抽奖特效

特效说明：

一款jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数。（兼容测试：IE7及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

HTML:

<!--效果html开始-->
<div id="lottery">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td class="lottery-unit lottery-unit-0"><img src="/UploadFiles/2021-04-02/1.png">

js部分


<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">

CSS部分


/* 效果CSS开始 */
#lottery{width:574px;height:584px;margin:0px auto;background:url(../images/bg.jpg) no-repeat;padding:50px 55px;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999}
#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#ea0000;}
/* 效果CSS结束 */


JS中可设置参数：  


index:-1,    //当前转动到哪个位置，起点位置

count:0,    //总共有多少个位置

timer:0,    //setTimeout的ID，用clearTimeout清除

speed:20,    //初始转动速度

times:0,    //转动次数

cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节

prize:-1,    //中奖位置
最后奉上演示图