本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • jQuery动画扭蛋机抽奖代码
    时间:2019-11-28 15:50 来源:开源之家 作者:开源之家测试提供 下载:182 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:149 KB
    • 运行环境:HTML
    • 下载次数:182 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    jQuery动画扭蛋机抽奖代码

    特效描述:jQuery动画 扭蛋机抽奖,jQuery动画扭蛋机抽奖代码

    代码结构

    1. 引入CSS

    1
    <link href="css/style.css" type="text/css" rel="stylesheet">

    2. 引入JS

    1
    <script src="js/jquery1.8.3.min.js"></script>

    3. HTML代码

    <div class="niu_danji">
        <!--机器-->
        <div class="game_qu">
            <!--go-->
            <div class="game_go">100/次</div>
             <div class="wdjifen">10000</div>
        </div>
        <!--球-->
        <div class="dan_gund">
            <span  class="qiu_1 diaol_1"></span>
            <span  class="qiu_2 diaol_2"> </span>
            <span  class="qiu_3 diaol_3"></span>
            <span  class="qiu_4 diaol_4"></span>
            <span  class="qiu_5 diaol_5"></span>
            <span  class="qiu_6 diaol_6"></span>>
            <span  class="qiu_7 diaol_7"></span>
            <span  class="qiu_8 diaol_8"></span>
            <span  class="qiu_9 diaol_9"></span>
            <span  class="qiu_10 diaol_10"></span> 
            <span  class="qiu_11 diaol_11"></span>   
        </div>
         <!--中奖掉落-->
       <div class="medon"><img src="images/mendong.png"></div>
       <div class="zjdl ">
            <span></span>
       </div>
       </div>
    <!--中奖 获得一等奖-->
    <div class="zonj_zezc none" id="jianpin_one">
        <div class="jpzs aiqiyi tc_anima">
            <em><img src="images/close.png"></em>
            <h2>
                <b>恭喜你!<br>获得一等奖!</b>
            </h2>
        </div></div>
    <!--中奖获得二等奖-->
    <div class="zonj_zezc none"  id="jianpin_two">
        <div class="jpzs aiqiyi tc_anima">
            <em><img src="images/close.png"></em>
            <h2>
                <b>恭喜你!<br>获得二等奖!</b>
            </h2>
        </div>
    </div>
    <!--中奖 获得三等奖-->
    <div class="zonj_zezc none"  id="jianpin_three">
        <div class="jpzs aiqiyi tc_anima">
            <em><img src="images/close.png"></em>
            <h2>
                <b>恭喜你!<br>获得三等奖!</b>
            </h2>
        </div>
    </div>
    <!--没有中奖-->
    <div class="zonj_zezc none" id="jianpin_kong">
        <div class="jpzs aiqiyi tc_anima">
            <em><img src="images/close.png"></em>
            <h2>
                咦?没有抽中?
            </h2>
        </div>
    </div>
    <!--积分不足-->
    <div class="zonj_zezc none" id="no_jifeng">
        <div class="jpzs aiqiyi tc_anima">
            <em><img src="images/close.png"></em>
            <h2>
                对不起,积分不足!
            </h2>
        </div>
    </div>
    <script>
    $(document).ready(function(e) {
        //一等奖 关闭
        $("#jianpin_one em img").click(function(){
            $("#jianpin_one").hide();
            }
        );      
        //二等奖 关闭
        $("#jianpin_two em img").click(function(){
            $("#jianpin_two").hide();
            }
        );      
        //三等奖 关闭
        $("#jianpin_three em img").click(function(){
            $("#jianpin_three").hide();
            }
        );          
        //没有中奖 关闭
        $("#jianpin_kong em img").click(function(){
            $("#jianpin_kong").hide();
            }
        );          
        //积分不足 关闭
        $("#no_jifeng em img").click(function(){
            $("#no_jifeng").hide();
            }
        );      
    var score=470;
    $(".wdjifen").html(score);
    $(".game_go").click(function(){
        score-=100;
            if(score<0){
                for(i=1;i<=11;i++){
                    $(".qiu_"+i).removeClass("wieyi_"+i);
                }
                $("#no_jifeng").show();
                }else{
                    draw()
                    }
            });
    function draw(){
        var number =Math.floor(4*Math.random()+1);  
        for(i=1;i<=11;i++){
                $(".qiu_"+i).removeClass("diaol_"+i);
                $(".qiu_"+i).addClass("wieyi_"+i);
            };
        setTimeout(function (){
            for(i=1;i<=11;i++){
            $(".qiu_"+i).removeClass("wieyi_"+i);
            }
        },1100);    
        setTimeout(function(){
            switch(number){
                case 1:$(".zjdl").children("span").addClass("diaL_one");break;
                case 2:$(".zjdl").children("span").addClass("diaL_two");break;
                case 3:$(".zjdl").children("span").addClass("diaL_three");break;
                case 4:$(".zjdl").children("span").addClass("diaL_four");break;
            }
            $(".zjdl").removeClass("none").addClass("dila_Y");
                    setTimeout(function (){
                    switch(number){
                        case 1:$("#jianpin_one").show();break;
                        case 2:$("#jianpin_two").show();break;
                        case 3:$("#jianpin_three").show();break;
                        case 4:$("#jianpin_kong").show();break;
                    }
                },900);
            },1100)
        //取消动画
        setTimeout(function (){
                $(".zjdl").addClass("none").removeClass("dila_Y");
                $(".wdjifen").html(score);
                $(".zjdl").children("span").removeAttr('class');
            },2500)
    }   
    });
    </script>

    jQuery动画扭蛋机抽奖代码

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信