头像

PHP+jQuery掷色子点数抽奖功能

来源:https://www.daimasucai.com/draw/98.html 代码素材管理员 2017-01-31浏览()

本文以大富翁游戏为背景,通过掷色子点数来达到抽奖的效果。

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

PHP+jQuery掷色子点数抽奖功能
分类:首页>>PHP/Mysql>>抽奖 阅读次数:
查看演示 下载次数: 6

手机扫码访问:

下载资源 下载积分: 20

  HTML

  首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载。我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来放置奖品的。

<div class="demo">  

    <div class="wrap">  

        <div id="msg"></div>  

           <div id="dice"><span class="dice dice_1" id="dice1"></span>  

        <span class="dice dice_6" id="dice2"></span></div>  

    </div>  

    <ul id="prize">  

        <li id="d_0"><img src="images/0.gif" alt="开始"></li>  

        <li id="d_1"><img src="images/1.gif" alt="现金100元"></li>  

        <li id="d_2"><img src="images/2.gif" alt="泰迪熊宝宝"></li>  

        <li id="d_3"><img src="images/7.gif" alt="谢谢参与"></li>  

        <li id="d_4"><img src="images/3.gif" alt="iphone 5s"></li>  

        <li id="d_5"><img src="images/4.gif" alt="笔记本电脑"></li>  

        <li id="d_6"><img src="images/7.gif" alt="谢谢参与"></li>  

        <li id="d_7"><img src="images/5.gif" alt="单反相机"></li>  

        <li id="d_8"><img src="images/6.gif" alt="轿车"></li>  

        <li id="d_9"><img src="images/7.gif" alt="谢谢参与"></li>  

    </ul>  

</div>

  jQuery

  我们使用jQquery来完成前端动作,包括掷色子动画,仿大富翁奖品逐步运动动画,其中有防重复点击知识、ajax交互知识,动画提示知识。整个操作流程可简单概括为:点击色子->向dice.php发送ajax请求->完成掷色子动画->提示点数->逐步运动动画到最终奖品位置停止->完成抽奖。

$(function(){  

    $("#dice").click(function(){  

        $("#prize li .mask").remove();  

        $(".wrap").append("<div id='dice_mask'></div>");//加遮罩  

        var dice1 = $("#dice1");  

        var dice2 = $("#dice2");  

        $.getJSON("dice.php",function(json){  

            var num1 = json[0];  

            var num2 = json[1];  

            diceroll(dice1,num1);//掷色子1动画  

            diceroll(dice2,num2);//掷色子2动画  

            var num = parseInt(num1)+parseInt(num2);  

            $("#msg").css("top","-10px").fadeIn(500).text(num+'点').animate({top:'-50px'},'1000').fadeOut(500);  

            roll(0, num);//逐步运动动画  

        });  

    });  

});


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

评论(0)


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

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