JQuery做一个农场

JQuery做的一个农场

Css代码

<style>
    *{
        margin: 0;
    }
    .iBg{
        /*背景*/
        width:80%;
        height: 100%;
        position:absolute;
        top:0px;
        left:0px;
        background: url("img/farm.jpg");
    }
    img{
        /*控制图片*/
        position:absolute;
        top:85px;
        left:195px;
    }
    #seed{
        /*控制播种按钮*/
        background-image:url(img/btn_seed.png);
        width:56px;
        height:56px;
        position:absolute;
        top:690px;
        left:250px;
        cursor:hand;
    }
    #grow{
        /*控制生长按钮*/
        background-image:url(img/btn_grow.png);
        width:56px;
        height:56px;
        position:absolute;
        top:690px;
        left:350px;
        cursor:hand;
    }
    #bloom{
        /*控制开花按钮*/
        background-image:url(img/btn_bloom.png);
        width:56px;
        height:56px;
        position:absolute;
        top:690px;
        left:450px;
        cursor:hand;
    }
    #fruit{
        /*控制结果按钮*/
        background-image:url(img/btn_fruit.png);
        width:56px;
        height:56px;
        position:absolute;
        top:690px;
        left:550px;
        cursor:hand;
    }
    .border{
        border: 5px solid coral;
        border-radius: 30px;
    }

JQuery代码

<script>
    var img ;
    $(document).ready(function(){

        $('#bg').on('click',function () {
            console.log('Y:'+event.clientY+'X:'+event.clientX);
        })
        function f(){
            $('#bg').off();
            $("#bg").on("click",function(e){
                if(e.clientX>84&&e.clientX<1469&&e.clientY>262&&e.clientY<724){
                    $("<img src='img/"+img+"'/>").prependTo("#bg").css("top",e.clientY-40).css("left",e.clientX-50).on('click',function () {
                        $(this).remove();
                    });
                }else{
                    $('#bg').off();
                }
            });
        }
        $("#seed").on("click",function(){
            $('span').removeClass('border');
            $(this).addClass('border');//给点击的span加样式
            img = "seed.png";
            f();
        });
        $("#grow").on("click",function(){			//绑定生长按钮的单击事件
            $('span').removeClass('border');
            $(this).addClass('border');
            img = "grow.png";
            f();
        });
        $("#bloom").on("click",function(){		//绑定开花按钮的单击事件
            $('span').removeClass('border');
            $(this).addClass('border');
            img = "bloom.png";
            f();
        });
        $("#fruit").on("click",function(){			//绑定结果按钮的单击事件
            $('span').removeClass('border');
            $(this).addClass('border');
            img = "fruit.png";
            f();
        });
    });
</script>

效果图