农场所需的图片:
所需的按钮
这里是简单的实现操作,只能点击按钮看到植物的播种,生长,开花,结果,代码如下:
<!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>
其中用到了jQuery,css,html代码,比较简单,效果如下:
点击播种
点击生长
点击开花
点击结果