jquery九宫格抽奖转盘插件lottery
Posted Java引导者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery九宫格抽奖转盘插件lottery相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery九宫格抽奖转盘插件lottery</title>
<style type="text/css">
#lottery{width:574px;height:584px;margin:20px auto 0;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;}
#demo{width:300px; margin:50px auto 10px; overflow:hidden;}
#demo a{float:left; width:90px; height:30px; line-height:30px; text-align:center; margin-left:10px; background-color:#000; color:#fff; text-decoration:none; font-weight:bold;}
#demo a.cur{background-color:#933;}
</style>
</head>
<body>
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="lottery-group">
<td class="lottery-unit"><img src="images/1.png" /></td>
<td class="lottery-unit"><img src="images/2.png" /></td>
<td class="lottery-unit"><img src="images/4.png" /></td>
<td class="lottery-unit"><img src="images/3.png" /></td>
</tr>
<tr class="lottery-group">
<td class="lottery-unit"><img src="images/7.png" /></td>
<td colspan="2" rowspan="2"><a href="#"></a></td>
<td class="lottery-unit"><img src="images/5.png" /></td>
</tr>
<tr class="lottery-group">
<td class="lottery-unit"><img src="images/1.png" /></td>
<td class="lottery-unit"><img src="images/6.png" /></td>
</tr>
<tr class="lottery-group">
<td class="lottery-unit"><img src="images/3.png" /></td>
<td class="lottery-unit"><img src="images/6.png" /></td>
<td class="lottery-unit"><img src="images/8.png" /></td>
<td class="lottery-unit"><img src="images/7.png" /></td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/lottery.js"></script>
<script type="text/javascript">
window.onload = function () {
lottery.lottery({
selector: '#lottery',
width: 4,
height: 4,
index: 0, // 初始位置
initSpeed: 500, // 初始转动速度
// upStep: 50, // 加速滚动步长
// upMax: 50, // 速度上限
// downStep: 30, // 减速滚动步长
// downMax: 500, // 减速上限
// waiting: 5000, // 匀速转动时长
beforeRoll: function () { // 重写滚动前事件：beforeRoll
//console.log(this);
//alert(1);
},
beforeDown: function () { // 重写减速前事件：beforeDown
//console.log(this);
//alert(1);
},
//抽奖的算法 可以简单定义几个区间 [10]-iphone [30] oppo啥的
aim: function () { // 重写计算中奖号的方法：aim
console.log(this);
this.options.target = 11;
}
});
}
</script>
</body>
</html>需要在源码中导入这两个js文件
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/lottery.js"></script>回复“抽奖”获取本次抽奖demo用到的图片素材以及相关的JS文件
创建一个文件夹名字为（抽奖）
在抽奖文件夹里面创建一个名字为images文件夹存放图片素材和一个名字为js的文件夹存放相关的js文件
在抽奖文件夹里面创建一个html文件，然后复制上方的代码进去保存即可！
以上是关于jquery九宫格抽奖转盘插件lottery的主要内容，如果未能解决你的问题，请参考以下文章