头像

PHP+jQuery+Ajax九宫格抽奖转盘

来源:http://school.sxbd100.com/draw/74.html 代码交流管理员 2016-12-22浏览(1093)

分享一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置、奖品数量、转动次数、中奖位置参数,并且后台ajax.php可设置奖品和中奖概率。

程序员,你不是一个人;网站开发QQ群:136483411  在线充值,或联系QQ 304534221直接充值

PHP+jQuery+Ajax九宫格抽奖转盘
分类:首页>>PHP/Mysql>>抽奖 阅读次数:1094
查看演示 下载次数: 106

手机扫码访问:

下载资源 下载积分: 10

  HTML

  首先我们在#lottery放置12个奖品,代码如下:

<div id="lottery"> 

    <table border="0" cellpadding="0" cellspacing="0"> 

        <tr> 

            <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> 

        </tr> 

        <tr> 

            <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> 

        </tr> 

        <tr> 

            <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> 

        </tr> 

        <tr> 

            <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> 

        </tr> 

    </table> 

</div>

  Ajax.php

  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), 

);


标签: 抽奖特效
声明:本文为原创文章,如需转载,请注明来源school.sxbd100.com并保留原文链接:http://school.sxbd100.com/draw/74.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>