erdangjiade2 2017-08-07 14:41:24 333次浏览 0条回复 1 0 0

演示下载你也可以参考下这里:http://www.erdangjiade.com/js/3087.html
效果图片如下:

完整源码代码如下:


<!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>演示:PHP+jQuery+Ajax九宫格抽奖转盘</title>
        <meta name="keywords" content="九宫格抽奖,PHP抽奖转盘" />
        <meta name="description" content="分享一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置、奖品数量、转动次数、中奖位置参数,并且后台ajax.php可设置奖品和中奖概率。" />
        <link rel="stylesheet" type="text/css" href="http://www.erdangjiade.com/jquery/css/common.css" />
        <style type="text/css">
            #lottery{width:574px;height:584px;margin:20px 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;}

        </style>
    </head>
    <body>
        <div class="head">
            <div class="head_inner clearfix">
                <ul id="nav">
                    <li><a href="http://www.erdangjiade.com">首 页</a></li>
                    <li><a href="http://www.erdangjiade.com/templates">网站模板</a></li>
                    <li><a href="http://www.erdangjiade.com/js">网页特效</a></li>
                    <li><a href="http://www.erdangjiade.com/php">PHP</a></li>
                    <li><a href="http://www.erdangjiade.com/site">精选网址</a></li>
                </ul>
                <a class="logo" href="http://www.erdangjiade.com"><img src="http://www.erdangjiade.com/Public/images/logo.jpg" alt="素材火logo" /></a>
            </div>
        </div>
        <div class="container">

            <div class="demo">
                <h2 class="title"><a href="http://www.erdangjiade.com/js/129.html">教程:PHP+jQuery+Ajax九宫格抽奖转盘</a></h2>
                <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="javascript:void(0);"></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>
            </div>
        </div>
        <div class="foot">
            Powered by erdangjiade.com  本站皆为作者原创,转载请注明原文链接:<a href="http://www.erdangjiade.com" target="_blank">www.erdangjiade.com</a>
        </div>
        <script type="text/javascript" src="http://www.erdangjiade.com/Public/js/other/jquery.js"></script> 
        <script type="text/javascript">
            var lottery = {
                index: 0, //当前转动到哪个位置,起点位置
                count: 0, //总共有多少个位置
                timer: 0, //setTimeout的ID,用clearTimeout清除
                speed: 20, //初始转动速度
                times: 0, //转动次数
                cycle: 50, //转动基本次数:即至少需要转动多少次再进入抽奖环节
                prize: 0, //中奖位置
                init: function(id) {
                    if ($("#" + id).find(".lottery-unit").length > 0) {
                        $lottery = $("#" + id);
                        $units = $lottery.find(".lottery-unit");
                        this.obj = $lottery;
                        this.count = $units.length;
                        $lottery.find(".lottery-unit-" + this.index).addClass("active");
                    }
                },
                roll: function() {
                    var index = this.index;
                    var count = this.count;
                    var lottery = this.obj;
                    $(lottery).find(".lottery-unit-" + index).removeClass("active");
                    index += 1;
                    if (index > count - 1) {
                        index = 0;
                    }
                    $(lottery).find(".lottery-unit-" + index).addClass("active");
                    this.index = index;
                    return false;
                },
                stop: function(index) {
                    this.prize = index;
                    return false;
                }
            };

            function roll() {
                lottery.times += 1;
                lottery.roll();
                var prize_site = $("#lottery").attr("prize_site");
                if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
                    var prize_id = $("#lottery").attr("prize_id");
                    var prize_name = $("#lottery").attr("prize_name");
                    alert("前端中奖位置:"+prize_site+"\n"+"中奖名称:"+prize_name+"\n中奖id:"+prize_id)
                    clearTimeout(lottery.timer);
                    lottery.prize = -1;
                    lottery.times = 0;
                    click = false;

                } else {
                    if (lottery.times < lottery.cycle) {
                        lottery.speed -= 10;
                    } else if (lottery.times == lottery.cycle) {
                        var index = Math.random() * (lottery.count) | 0;
                        lottery.prize = index;
                    } else {
                        if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                            lottery.speed += 110;
                        } else {
                            lottery.speed += 20;
                        }
                    }
                    if (lottery.speed < 40) {
                        lottery.speed = 40;
                    }
                    lottery.timer = setTimeout(roll, lottery.speed);
                }
                return false;
            }

            var click = false;

            $(function() {
                lottery.init('lottery');
                $("#lottery a").click(function() {
                     if (click) {
                        return false;
                    } else {
                        lottery.speed = 100;
                        $.post("ajax.php", {uid: 1}, function(data) { //获取奖品,也可以在这里判断是否登陆状态
                            $("#lottery").attr("prize_site", data.prize_site);
                            $("#lottery").attr("prize_id", data.prize_id);
                            $("#lottery").attr("prize_name", data.prize_name);
                            roll();
                            click = true;
                            return false;
                        }, "json")
                    }
                });
            })
        </script>
    </body>
</html>
<!-- 以下是统计及其他信息,与演示无关,不必理会 -->
<div style="width:728px;margin:0 auto">
	
	
<script type="text/javascript">
    /*创建于 2017/8/2*/
    var cpro_id = "u3050277";
</script>
<script type="text/javascript" src="http://cpro.baidustatic.com/cpro/ui/c.js"></script>
</div>

    没有找到数据。
您需要登录后才可以回复。登录 | 立即注册