使用jQuery怼一个很low的QQ农场 | （练习+自娱自乐）

先来看一下效果：

需要用的知识：

• jQuery控制页面

开始敲代码，首先写HTML代码：

<div id="bg">
    <span id="seed"></span>
    <span id="grow"></span>
    <span id="bloom"></span>
    <span id="fruit"></span>
</div>

然后写CSS代码，控制农场背景、控制按钮和图片的样式：

#bg{
    width: 456px;
    height: 266px;
    background-image: url("images/plowland.jpg");
    border: #999 1px solid;
    padding: 5px;
}
img{
    position: absolute;
    top:85px;
    left: 195px;
}
#seed{
    background-image: url("images/btn_seed.png");
    width: 56px;
    height: 56px;
    position: absolute;
    top:229px;
    left:49px;
    cursor: pointer;
}
#grow{
    background-image: url("images/btn_grow.png");
    width: 56px;
    height: 56px;
    position: absolute;
    top:229px;
    left: 154px;
    cursor: pointer;
}
#bloom{
    background-image: url("images/btn_bloom.png");
    width: 56px;
    height: 56px;
    position: absolute;
    top:229px;
    left: 259px;
    cursor: pointer;
}
#fruit{
    background-image: url("images/btn_fruit.png");
    width: 56px;
    height: 56px;
    position: absolute;
    top:229px;
    left: 368px;
    cursor: pointer;
}

最后写jQuery代码，为每个按钮绑定单击事件，并在其单击事件中应用操作DOM节点的方法控制农作物生长……

$(document).ready(function () {
    $("#seed").bind("click",function () {
        $("img").remove();
        $("#bg").prepend("<img src='images/seed.png'/>");
    });
    $("#grow").bind("click",function () {
        $("img").remove();
        $("#bg").append("<img src='images/grow.png' />");
    });
    $("#bloom").bind("click",function () {
        $("img").replaceWith("<img src='images/bloom.png' />")
    });
    $("#fruit").bind("click",function () {
        $("<img src='images/fruit.png' />").replaceAll("img");
    });
});

确实很简单…………记录在这里，以后对这个农场进行升级。

• 点赞
• 收藏
• 分享
• • 文章举报

lesileqin 发布了187 篇原创文章 · 获赞 357 · 访问量 6万+ 私信 关注

标签：jQuery,自娱自乐,QQ,img,image,height,background,images,56px
来源： https://blog.csdn.net/lesileqin/article/details/104069301