头像

jQuery砸金蛋_PHP砸金蛋

来源:https://www.daimasucai.com/other/11.html 代码素材管理员 2016-09-02浏览()

本文将使用jQuery与PHP讲解如何实现一个WEB砸金蛋程序,首先我们需要准备素材,即金蛋图片、砸碎后的金蛋图片、砸碎后的碎花图片、以及锤子四张图片。

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

jQuery砸金蛋_PHP砸金蛋
分类:首页>>PHP/Mysql>>其他 阅读次数:
查看演示 下载次数: 58

手机扫码访问:

下载资源 下载积分: 30

  HTML

    <div class="egg">  

       <ul class="egg_list">  

        <p class="hammer" id="hammer">锤子</p>  

        <p class="result_tip" id="result_tip"><b id="result"></b></p>  

        <li><span>1</span><sup></sup></li>  

        <li><span>2</span><sup></sup></li>  

        <li><span>3</span><sup></sup></li>  

       </ul>  

    </div>

  最后,我们向后台ajax.php发送一个ajax请求,后台php程序会处理奖项分配并把中奖结果返回。我们使用animate()来实现砸锤子的动画,通过改变锤子的top和left位子来实现简单的动画效果,锤子砸下去后,金蛋样式变为.curruent,同时金花四溅,最后展现中奖结果,我们看下砸蛋的eggClick方法:

    function eggClick(obj) {

        $.get("ajax.php",

        function(data) {

            if (obj.hasClass("current")) {

                alert("蛋都碎了一地,刷新重新来过吧!");

                return false;

            }

            $(".hammer").css({

                "top": obj.position().top - 55,

                "left": obj.position().left + 185

            });

            $(".hammer").animate({

                "top": obj.position().top - 25,

                "left": obj.position().left + 125

            },

            30,

            function() {

                obj.addClass("current"); //蛋碎效果 

                obj.find("sup").show(); //金花四溅 

                $(".hammer").hide();

                $('.result_tip').css({

                    display: 'block',

                    top: '100px',

                    left: obj.position().left + 45,

                    opacity: 0

                }).animate({

                    top: '50px',

                    opacity: 1

                },

                300,

                function() {

                    if (data.msg == 1) {

                        $("#result").html("恭喜您中得" + data.prize_title + "!");

                    } else {

                        $("#result").html("Sorry,您没能中奖!");

                    }

                });

            });

        },

        "json")

    }


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

评论(0)


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

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