用Java和Jquery实现了一个砸金蛋例子

之前在网上找到了一个Jquery+PHP实现的砸金蛋的例子，正好公司也要我写一个类似的砸金蛋的功能，于是在网上找了找参考，用Jsp程序也弄了一个出来，首先是Html的效果，我打算每次在页面上只显示一个金蛋，点击的时候用Ajax提交，Java在后台处理一下返回结果就Ok了。

html页面代码：

<div class="fanzt-egg">
        <div class="fanzt-egg-img" data-flag="0" onClick="eggClick(this)">
            <img src="images/egg_1.png" id="egg">
        </div>
        <div class="fanzt-chuizi"><img src="images/img-6.png"></div>
        <div class="fanzt-hua"><img src="images/img-4.png"></div>
        <div class="fanzt-message"><b>中奖了</b></div>
    </div>

css样式：

<style>
    body{margin:0px;padding:0px;}
    .fanzt-egg{margin:0px;padding:0px; background-color:RGB(221,147,0); position:relative;}
    .fanzt-egg .fanzt-egg-img{position:absolute; z-index:9990;}
    .fanzt-egg .fanzt-chuizi{ position:absolute; z-index:9991;display:none;-webkit-transform:rotate(5deg);
        -moz-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg);}
    .fanzt-egg .fanzt-hua{ position:absolute; z-index:9991;display:none;
        -webkit-transition::all 0.8s ease;-moz-transition::all 0.8s ease;
        -o-transition::all 0.8s ease;transition:all 0.8s ease;}
    .fanzt-egg .fanzt-message{ position:absolute; z-index:9995;display:none;
        width:140px; padding:10px;color:red;text-align:center;
        -webkit-transition::all 0.8s ease;-moz-transition::all 0.8s ease;
        -o-transition::all 0.8s ease;transition:all 0.8s ease;}
</style>

JavaScript：

<script>
        function eggClick(obj){
            if($(obj).attr("data-flag")=="0"){
                $.post("ser.jsp",{
                    //要传递的参数
                },function(data){
                    if(data!=null){
                        $(".fanzt-chuizi").show();
                        var ctop=$(".fanzt-chuizi").position().top-20;
                        var cleft=$(".fanzt-chuizi").position().left+30;
                        //1.锤子抬起的动作
                        $(".fanzt-chuizi").animate({"top":ctop+"px","left":cleft+"px"},1500,function(){
                            //2.锤子抬起达到最顶点的动作
                            $(".fanzt-chuizi").css(
                                {
                                        "-webkit-transform":"rotate(80deg)",
                                        "-moz-transform":"rotate(80deg)",
                                        "-o-transform":"rotate(80deg)",
                                        "transform":"rotate(80deg)",
                                        "-webkit-transition":"all 0.8s ease",
                                        "-moz-transition":"all 0.8s ease",
                                        "-o-transition":"all 0.8s ease",
                                        "transition":"all 0.8s ease"
                                });
                            //3.锤子落下的动作
                            $(".fanzt-chuizi").animate({"top":(ctop+25)+"px","left":(cleft-50)+"px"},200,function(){
                                //4.锤子落下到达最低点
                                $(".fanzt-chuizi").css(
                                    {
                                        "-webkit-transform":"rotate(5deg)",
                                        "-moz-transform":"rotate(5deg)",
                                        "-o-transform":"rotate(5deg)",
                                        "transform":"rotate(5deg)",
                                        "-webkit-transition":"all 0.1s ease",
                                        "-moz-transition":"all 0.1s ease",
                                        "-o-transition":"all 0.1s ease",
                                        "transition":"all 0.1s ease"
                                    });
                                //5.金蛋破碎
                                $("#egg").attr("src","images/egg_2.png");
                                $(".fanzt-chuizi").hide();
                                //6.金花溅出
                                $(".fanzt-hua").slideDown(200);
                                //7.中奖结果
                                $(".fanzt-message").show(200);
                                $(".fanzt-message").find("b").text(data);
                                //8.程序处理
                                $(obj).attr("data-flag","1");//已砸蛋，不能再砸
                            });
                        });
                    }
                });
            }
        }
        $(function(){wh();});
        $(window).resize(function(e){wh();});
        //控制宽高
        function wh(){
            var eggh=158;
            var eggw=187;
            $(".fanzt-egg").width($(window).width());
            $(".fanzt-egg").height($(window).height());
            $(".fanzt-egg-img").css({"top":(($(window).height()-eggh)/2)+"px","left":(($(window).width()-eggw)/2)+"px"});
            $(".fanzt-chuizi").css({"top":(($(window).height()-eggh)/2)-15+"px","left":(($(window).width()-eggw)/2)+130+"px"});
            $(".fanzt-hua").css({"top":(($(window).height()-eggh)/2-45)+"px","left":(($(window).width()-eggw)/2-30)+"px"});
            $(".fanzt-message").css({"top":(($(window).height()-eggh)/2-30)+"px","left":(($(window).width()-eggw)/2)+"px"});
        }
    </script>

Java服务端的代码：

<%@page import="java.io.PrintWriter"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    JSONArray array=getData();
    PrintWriter writer=response.getWriter();
    JSONObject o=getRand(array);
    writer.write(o.getString("prize")+","+o.getString("name"));
    writer.flush();
    writer.close();
%>
<%!
    public JSONObject getRand(JSONArray array){
        JSONObject o=null;
        //1.总中奖概率
        Integer gjSum=0;
        for(int i=0;i<array.size();i++){
            JSONObject ob=JSONObject.fromObject(array.get(i));
            gjSum+=ob.getInt("prob");
        }
        //2.计算概率
        for(int i=0;i<array.size();i++){
            JSONObject ob=JSONObject.fromObject(array.get(i));
            Integer num=(int) (Math.random()*gjSum+1);
            if(num<=ob.getInt("prob")){
                o=ob;
                break;
            }else{
                gjSum-=ob.getInt("prob");
            }
        }
        return o;
    }
    public JSONArray getData(){
        JSONArray array=new JSONArray();
        JSONObject object=new JSONObject();
        object.put("id", "1");
        object.put("prize","一等奖");
        object.put("name","Iphone 6S");
        object.put("num","1");
        object.put("prob","1");
        array.add(object);
        object=new JSONObject();
        object.put("id", "2");
        object.put("prize","二等奖");
        object.put("name","Ipad mini一台");
        object.put("num","2");
        object.put("prob","2");
        array.add(object);
        object=new JSONObject();
        object.put("id", "3");
        object.put("prize","三等奖");
        object.put("name","128G 金士顿U盘一个");
        object.put("num","8");
        object.put("prob","5");
        array.add(object);
        object=new JSONObject();
        object.put("id", "4");
        object.put("prize","四等奖");
        object.put("name","爱国者充电宝一个");
        object.put("num","10");
        object.put("prob","10");
        array.add(object);
        object=new JSONObject();
        object.put("id", "5");
        object.put("prize","五等奖");
        object.put("name","购物优惠券一张");
        object.put("num","500");
        object.put("prob","79");
        array.add(object);
        return array;
    }
%>

本文例子下载：http://pan.baidu.com/s/1o7PuPb8

PHP的例子另请参考：http://www.5icool.org/a/201308/a2234.html