开心农场

仿照qq农场实现了一个简易的开心农场，使我们在开心快乐中学习

在农场里我们可以进行基本的操作播种，生长，开花和结果。

先看一下效果图
在这里插入图片描述
生长

结果

一番欣赏之后是不是感觉很有趣很好玩~~~~

**程序解读：**准备好相关的图片和素材，播种生长开花和结果都是远行图片div，当点击时，切换为相对应的图片，就实现了点击相应按钮出现播种生长开花结果的过程。
1. Body内容

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

2. CSS样式

div{font-size: 12px;border: #999 1px solid;}#bg{width: 580px;height: 439px;background-image: url(img/farmBackground.png);}/*控制图片*/img{position: absolute;top: -155px;left: 150px;}/*控制播种按钮*/#seed{background-image: url(img/btn_seed.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 99px;cursor: hand;}/*控制生长按钮*/#grow{background-image: url(img/btn_grow.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 204px;cursor: hand;}/*控制开花按钮*/#bloom{background-image: url(img/btn_bloom.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 309px;cursor: hand;}/*控制结果按钮*/#fruit{background-image: url(img/btn_fruit.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 418px;cursor: hand;}

3. Script代码

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

至此农场的全部功能都能实现了！！！

下面展示上面代码结合的总体代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery.js"></script><style type="text/css">div{font-size: 12px;border: #999 1px solid;}#bg{width: 580px;height: 439px;background-image: url(img/farmBackground.png);}/*控制图片*/img{position: absolute;top: -155px;left: 150px;}/*控制播种按钮*/#seed{background-image: url(img/btn_seed.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 99px;cursor: hand;}/*控制生长按钮*/#grow{background-image: url(img/btn_grow.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 204px;cursor: hand;}/*控制开花按钮*/#bloom{background-image: url(img/btn_bloom.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 309px;cursor: hand;}/*控制结果按钮*/#fruit{background-image: url(img/btn_fruit.png);width: 56px;height: 56px;position: absolute;top: 380px;left: 418px;cursor: hand;}</style></head><body><div id="bg"><div id="seed"></div><span id="grow"></span><span id="bloom"></span><span id="fruit"></span></div><script type="text/javascript">$(document).ready(function(){$("#seed").bind("click",function(){$("img").remove();$("#seed").prepend("<img src='img/seed.png' />")});$("#grow").bind("click",function(){$("img").remove();$("#seed").append("<img src='img/grow.png' />")});$("#bloom").bind("click",function(){$("img").replaceWith("<img src='img/bloom.png' />")});$("#fruit").bind("click",function(){$("<img src='img/fruit.png' />").replaceAll("img");});});</script></body>
</html>