网站设计专业的公司,wordpress 手机网站支付宝,公司品牌的塑造网站建设,湖北网站建设公司哪家好仿照qq农场实现了一个简易的开心农场#xff0c;使我们在开心快乐中学习
在农场里我们可以进行基本的操作播种#xff0c;生长#xff0c;开花和结果。
先看一下效果图 生长 结果 一番欣赏之后是不是感觉很有趣很好玩~~~~
**程序解读#xff1a;**准备好相关的图片和…仿照qq农场实现了一个简易的开心农场使我们在开心快乐中学习
在农场里我们可以进行基本的操作播种生长开花和结果。
先看一下效果图 生长 结果 一番欣赏之后是不是感觉很有趣很好玩~~~~
**程序解读**准备好相关的图片和素材播种 生长 开花和结果都是远行图片div当点击时切换为相对应的图片就实现了点击相应按钮出现播种生长开花结果的过程。 1. Body内容
div idbgdiv idseed/divspan idgrow/spanspan idbloom/spanspan idfruit/span/div2. 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 srcimg/seed.png /)});$(#grow).bind(click,function(){$(img).remove();$(#seed).append(img srcimg/grow.png /)});$(#bloom).bind(click,function(){$(img).replaceWith(img srcimg/bloom.png /)});$(#fruit).bind(click,function(){$(img srcimg/fruit.png /).replaceAll(img);});});至此农场的全部功能都能实现了
下面展示上面代码结合的总体代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlescript srcjs/jquery.js/scriptstyle typetext/cssdiv{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/headbodydiv idbgdiv idseed/divspan idgrow/spanspan idbloom/spanspan idfruit/span/divscript typetext/javascript$(document).ready(function(){$(#seed).bind(click,function(){$(img).remove();$(#seed).prepend(img srcimg/seed.png /)});$(#grow).bind(click,function(){$(img).remove();$(#seed).append(img srcimg/grow.png /)});$(#bloom).bind(click,function(){$(img).replaceWith(img srcimg/bloom.png /)});$(#fruit).bind(click,function(){$(img srcimg/fruit.png /).replaceAll(img);});});/script/body
/html
在编辑代码中创作游戏是一件十分快乐的事呦
