QQ小农场

最新推荐文章于 2025-01-12 10:47:43 发布

原创最新推荐文章于 2025-01-12 10:47:43 发布 · 244 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

js+jquery 专栏收录该内容

3 篇文章

订阅专栏

GIF图

在这里插入图片描述

代码块

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

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

</style>
<body>
<div id="bg" class="iBg" ></div>
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>

</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var img ;
    $(document).ready(function(){

        $('#bg').on('click',function () {
            console.log('Y:'+event.clientY+'X:'+event.clientX);
        })
        function f(){//根据点击内容显示不同的图片
            $('#bg').off();//删除上次为$('#bg')设置的点击事件
            $("#bg").on("click",function(e){
                if(e.clientX>84&&e.clientX<1469&&e.clientY>262&&e.clientY<724){//设置点击事件范围
                    $("<img src='images/"+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');//将所有span上的边框样式删掉
            $(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>