奖品转盘图片素材免费下载，千图网为中国设计师们免费提供包括，，。千图网素材为用户免费分享产生，若发现您的权利被侵害，请联系 ，我们尽快处理Copyright & 2015 沪ICP备号-6 用时：0.0223上海工商404 Not Found
404 Not FoundjQuery+Ajax九宫格抽奖转盘 - 话题 - Yii Framework 中文社区
jQuery+Ajax九宫格抽奖转盘
3820次浏览
分享一款jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数，并且后台ajax.php可设置奖品和中奖概率。
首先我们在#lottery放置12个奖品，代码如下：
&div id="lottery"&
&table border="0" cellpadding="0" cellspacing="0"&
&td class="lottery-unit lottery-unit-0"&&img src="images/1.png"&&/td&
&td class="lottery-unit lottery-unit-1"&&img src="images/2.png"&&/td&
&td class="lottery-unit lottery-unit-2"&&img src="images/4.png"&&/td&
&td class="lottery-unit lottery-unit-3"&&img src="images/3.png"&&/td&
&td class="lottery-unit lottery-unit-11"&&img src="images/7.png"&&/td&
&td colspan="2" rowspan="2"&&a href="#"&&/a&&/td&
&td class="lottery-unit lottery-unit-4"&&img src="images/5.png"&&/td&
&td class="lottery-unit lottery-unit-10"&&img src="images/1.png"&&/td&
&td class="lottery-unit lottery-unit-5"&&img src="images/6.png"&&/td&
&td class="lottery-unit lottery-unit-9"&&img src="images/3.png"&&/td&
&td class="lottery-unit lottery-unit-8"&&img src="images/6.png"&&/td&
&td class="lottery-unit lottery-unit-7"&&img src="images/8.png"&&/td&
&td class="lottery-unit lottery-unit-6"&&img src="images/7.png"&&/td&
点击“开始抽奖”按钮，并且远程ajax.php获取奖项：
$(function() {
lottery.init('lottery');
$("#lottery a").click(function() {
if (click) {
lottery.speed = 100;
$.post("ajax.php", {
function(data) { //获取奖品，也可以在这里判断是否登陆状态
$("#lottery").attr("prize_site", data.prize_site);
$("#lottery").attr("prize_id", data.prize_id);
$("#lottery").attr("prize_name", data.prize_name);
12个奖品数组如下，其中prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推)
$prize_arr = array(
'0' =& array('id' =& 1, 'prize' =& '一等奖', 'v' =& 5),
'1' =& array('id' =& 2, 'prize' =& '二等奖', 'v' =& 5),
'2' =& array('id' =& 3, 'prize' =& '三等奖', 'v' =& 5),
'3' =& array('id' =& 4, 'prize' =& '四等奖', 'v' =& 5),
'4' =& array('id' =& 5, 'prize' =& '五等奖', 'v' =& 5),
'5' =& array('id' =& 6, 'prize' =& '六等奖', 'v' =& 5),
'6' =& array('id' =& 7, 'prize' =& '七等奖', 'v' =& 5),
'7' =& array('id' =& 8, 'prize' =& '八等奖', 'v' =& 5),
'8' =& array('id' =& 9, 'prize' =& '九等奖', 'v' =& 5),
'9' =& array('id' =& 10, 'prize' =& '十等奖', 'v' =& 5),
'10' =& array('id' =& 11, 'prize' =& '十一等奖', 'v' =& 25),
'11' =& array('id' =& 12, 'prize' =& '十二等奖', 'v' =& 25),
获取随机奖品：
foreach ($prize_arr as $k=&$v) {
$arr[$v['id']] = $v['v'];
$prize_id = getRand($arr); //根据概率获取奖项id
foreach($prize_arr as $k=&$v){ //获取前端奖项位置
if($v['id'] == $prize_id){
$prize_site = $k;
$res = $prize_arr[$prize_id - 1]; //中奖项
$data['prize_name'] = $res['prize'];
$data['prize_site'] = $prize_//前端奖项从-1开始
echo json_encode($data);
抽奖转盘演示：
不错支持一下
您需要登录后才可以回复。 |html5大转盘抽奖支持手机转盘抽奖代码 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 17时,
在线演示地址：/jiaoben/433.html
代码片段(2)
1.&[图片] jiaoben3403.jpg&&&&
2.&[代码][JavaScript]代码&&&&
var turnplate={
restaraunts:[],
//大转盘奖品名称
colors:[],
//大转盘奖品区块对应背景颜色
outsideRadius:192,
//大转盘外圆的半径
textRadius:155,
//大转盘奖品位置距离圆心的距离
insideRadius:68,
//大转盘内圆的半径
startAngle:0,
//开始角度
bRotate:false
//false:停止;ture:旋转
$(document).ready(function(){
//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.restaraunts = ["50M免费流量包", "10闪币", "谢谢参与", "5闪币", "10M免费流量包", "20M免费流量包", "20闪币 ", "30M免费流量包", "100M免费流量包", "2闪币"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
var rotateTimeOut = function (){
$('#wheelcanvas').rotate({
animateTo:2160,
duration:8000,
callback:function (){
alert('网络超时，请检查您的网络设置！');
//旋转转盘 item:奖品位置; txt：提示语;
var rotateFn = function (item, txt){
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
if(angles&270){
angles = 270 -
angles = 360 - angles + 270;
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
animateTo:angles+1800,
duration:8000,
callback:function (){
alert(txt);
turnplate.bRotate = !turnplate.bR
$('.pointer').click(function (){
if(turnplate.bRotate)
turnplate.bRotate = !turnplate.bR
//获取随机数(奖品个数范围内)
var item = rnd(1,turnplate.restaraunts.length);
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
rotateFn(item, turnplate.restaraunts[item-1]);
/* switch (item) {
rotateFn(252, turnplate.restaraunts[0]);
rotateFn(216, turnplate.restaraunts[1]);
rotateFn(180, turnplate.restaraunts[2]);
rotateFn(144, turnplate.restaraunts[3]);
rotateFn(108, turnplate.restaraunts[4]);
rotateFn(72, turnplate.restaraunts[5]);
rotateFn(36, turnplate.restaraunts[6]);
rotateFn(360, turnplate.restaraunts[7]);
rotateFn(324, turnplate.restaraunts[8]);
rotateFn(288, turnplate.restaraunts[9]);
console.log(item);
function rnd(n, m){
var random = Math.floor(Math.random()*(m-n+1)+n);
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
drawRouletteWheel();
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
//根据奖品个数计算圆周角度
var arc = Math.PI / (turnplate.restaraunts.length/2);
var ctx = canvas.getContext("2d");
//在给定矩形内清空一个矩形
ctx.clearRect(0,0,422,422);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#FFBE04";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = '16px Microsoft YaHei';
for(var i = 0; i & turnplate.restaraunts. i++) {
var angle = turnplate.startAngle + i *
ctx.fillStyle = turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
//----绘制奖品开始----
ctx.fillStyle = "#E5302F";
var text = turnplate.restaraunts[i];
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
//rotate方法旋转当前的绘图
ctx.rotate(angle + arc / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
if(text.indexOf("M")&0){//流量包
var texts = text.split("M");
for(var j = 0; j&texts. j++){
ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
if(j == 0){
ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
}else if(text.indexOf("M") == -1 && text.length&6){//奖品名称长度超过一定范围
text = text.substring(0,6)+"||"+text.substring(6);
var texts = text.split("||");
for(var j = 0; j&texts. j++){
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
//在画布上绘制填色的文本。文本的默认颜色是黑色
//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
//添加对应图标
if(text.indexOf("闪币")&0){
var img= document.getElementById("shan-img");
img.onload=function(){
ctx.drawImage(img,-15,10);
ctx.drawImage(img,-15,10);
}else if(text.indexOf("谢谢参与")&=0){
var img= document.getElementById("sorry-img");
img.onload=function(){
ctx.drawImage(img,-15,10);
ctx.drawImage(img,-15,10);
//把当前画布返回（调整）到上一个save()状态之前
ctx.restore();
//----绘制奖品结束----
开源中国-程序员在线工具：
相关的代码(1203)
11回/150020阅
[JavaScript]
83回/105158阅
[JavaScript]
20回/78583阅
[JavaScript]
49回/57620阅
2回/52777阅
[JavaScript]
50回/49703阅
[JavaScript]
13回/47078阅
[JavaScript]
17回/43142阅
[JavaScript]
10回/36900阅
[JavaScript]
11回/35306阅
[JavaScript]
这个转动的时候会遮盖指针，咋解决！
2楼：xioa_bai 发表于
img.onload=function(){&
& &&ctx.drawImage(img,-15,10);&&&&&
这段代码可以去除也没发现有什么影响
3楼：xioa_bai 发表于
引用来自“fangmingcong”的评论这个转动的时候会遮盖指针，咋解决！我试没发现会遮盖现象啊，不知道你改了什么没？
开源从代码分享开始
老鹰大神的其它代码