jQuery+JSP实现开心小农场效果

**效果展示**
过了这么久，又一次来写博客了，这一次写的是平常QQ空间中开心农场的效果，当然没有那里面的效果全了，就不废话了，看效果吧

代码展示
这是CSS样式

#bg{
            width: 500px;
            height: 280px;
            background-image: url(images/plowland.jpg);
            background-repeat: no-repeat;
            position: absolute;
        }
        img{
            position: absolute;
            top: 56px;
            left: 56px;
        }
        #seed{
            background-image: url(images/btn_seed.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 30px;
            cursor: hand;
        }
        #grow{
            background-image: url(images/btn_grow.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 110px;
            cursor: hand;
        }
        #bloom{
            background-image: url(images/btn_bloom.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 200px;
            cursor: hand;
        }
        #fruit{
            background-image: url(images/btn_fruit.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 290px;
            cursor: hand;
        }
        #harvest{
            background-image: url(images/btn_harvest.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 380px;
            cursor: hand;
        }
        .border{
            border: 2px solid red;
            border-radius: 50%;
        }
        #reaps{
            width: auto;
            height: auto;
            margin-top: 300px;
            position: absolute;
        }
        #sum{
            margin-top: 310px;
            margin-left: 65px;
            position: absolute;
            font-size: 30px;
        }

这是HTML代码

<div id="bg"></div>
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
<span id="harvest"></span>
<div id="reaps"></div>
<span id="sum"></span>在这里插入代码片

这是实现上面效果图的最终代码

<script type="text/javascript">
    $(function() {
        //给播种设置点击事件
        $("#seed").on("click", function () {
            $("#grow", "#bloom", "#fruit", "#harvest").removeClass("border");//移除生长的class值
            $(this).addClass("border");//给播种设置选中样式
            $("#bg").on("click", function (e) {
                $("<img src='images/seed.png'/>").addClass("img1").prependTo("#bg").css("top", e.pageY - 30).css("left", e.pageX - 34);
            });
            $(this).off("click");//关闭播种事件
        });
        //给生长设置点击事件
        $("#grow").on("click", function () {
            $("#seed", "#bloom", "#fruit", "#harvest").removeClass("border");//移除生长的class值
            $(this).addClass("border");//给播种设置选中样式
            if ($(".img1").attr("src") == "images/seed.png") {
                $(".img1").attr("src", "images/grow.png");
            } else {
                alert("请先播种！");
            }
        });
        //给开花设置点击事件
        $("#bloom").on("click", function () {
            $("#seed", "#grow", "#fruit", "#harvest").removeClass("border");//移除生长的class值
            $(this).addClass("border");//给播种设置选中样式
            if ($(".img1").attr("src") == "images/grow.png") {
                $(".img1").attr("src", "images/bloom.png");
            } else {
                alert("请先生长！");
            }
        });
        //给结果设置点击事件
        $("#fruit").on("click", function () {
            $("#seed", "#grow", "#bloom", "#harvest").removeClass("border");//移除生长的class值
            $(this).addClass("border");//给播种设置选中样式
            if ($(".img1").attr("src") == "images/bloom.png") {
                $(".img1").attr("src", "images/fruit.png");
            } else {
                alert("请先开花！");
            }
        });
        //给收获设置点击事件
        $("#harvest").on("click", function () {
            $("#seed", "#grow", "#bloom", "#fruit").removeClass("border");//移除生长的class值
            $(this).addClass("border");//给播种设置选中样式
            if ($(".img1").attr("src") == "images/fruit.png") {
                $(".img1").attr("src", "images/fruit.png").prependTo("#reaps").removeClass("img1").addClass("reap").css("top", 0).css("left", 0);
            } else {
                alert("作物还没成熟！");
            }
            $("#harvest").removeClass("border");
        });
    });
</script>在这里插入代码片

最终就这么多代码了，希望可以指出可简化的地方，也希望能帮助需要的人。

来源：https://blog.csdn.net/cyrrgt/article/details/102718687