使用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");});
});

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

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

简单的仿QQ聊天（自娱自乐聊天室）
设计思路: 首先搭建聊天界面,想要的效果如下整体为linearlayout线性布局 : 1.顶部是聊天界面的名称一个TextView 2.中间是ListView 用来显示聊天信息 3.底部是一个水 ...
一个很Low的通讯录管理系统(但是能用)C/C++单链表实现
通讯录管理系统的设计问题需求分析在计算机还未普及之前通讯管理都是由联系人采用名片,通讯录往往采用的是笔录手工记帐的方式来操作的.现在一般的通讯录管理都是采用计算机作为工具的实用的计算机通讯录管理程 ...
上传一个很low的雷霆战机java小游戏
我自己写了一份,但觉得还是老师写的有注释容易懂: 不多bb,具体代码如下: Ball.java: package day04; import java.awt.Graphics; import jav ...
如果你的朋友圈很low
以前有这样一个问题,有很多人问我的信息都是从哪里获取,我把朋友圈排在了第一位,很多人就说,哎呀,那是因为您的朋友圈啊,我们朋友圈里除了养生,段子就是鸡汤啊. 实际上,我们知道现在的朋友圈已经不能代表传 ...
jQuery插件开发 - 其实很简单
[前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...
Giphy – 分享一个很棒的 GIF 动画图片搜索引擎
GIF 动画图片是一种非常有趣的图片格式,比静态图片更能够表达出含义,如果能制作得有创意,那就非常的有趣.今天向大家推荐一个很棒的 GIF 动画图片搜索引擎--Giphy. 您可能感兴趣的相关文章轻 ...
【转载】jQuery插件开发精品教程，让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
如何成为一个很厉害的工程师
有很多人,包括我也困惑的一个问题,就是如何成为一个很厉害的工程师.类似的问题也有很多,如何成为一个很厉害的运营,如何成为一个很厉害的产品,或者跨行业的,如何成为一个很厉害的医生,如何成为一个很厉害的作 ...
ajax搜索思路,jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jq ...

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

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

最新文章

热门文章