我的欢乐小农场 | 易学教程

看见这个图自我感觉回到了小学

看见这个图自我感觉回到了小学

感觉是不是特别像QQ农场
首先来看一下css样式

<style type="text/css">
div{
	font-size:12px;
	border:#999 1px solid;
	padding:5px;
}
#bg{		/*控制页面背景*/
	width:456px;
	height:266px;
	background-image:url(images/plowland.jpg);
}
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:hand;
}
#grow{		/*控制生长按钮*/
	background-image:url(images/btn_grow.png);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:154px;
	cursor:hand;
}
#bloom{		/*控制开花按钮*/
	background-image:url(images/btn_bloom.png);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:259px;
	cursor:hand;
}
#fruit{		/*控制结果按钮*/
	background-image:url(images/btn_fruit.png);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:368px;
	cursor:hand;
}

然后接着就是js代码

<script src="JS/jquery.js"></script>
<script type="text/javascript">
    var img = "images/seed.png"
	$(document).ready(function(){
		$("div").bind("click",function(e){
        $("<img src='"+img+"'/>").prependTo("#bg").css("left", e.pageX-50).css("top", e.pageY-60);
				});
		$("#grow").bind("click",function(){			//绑定生长按钮的单击事件
							
			img = "images/grow.png";
		});	
		$("#bloom").bind("click",function(){		//绑定开花按钮的单击事件
            img = "images/bloom.png";
		});
		$("#fruit").bind("click",function(){			//绑定结果按钮的单击事件
		img = "images/fruit.png";
		});								
	});
</script>

最后就是html代码

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

基本上跟大家小时候玩的QQ农场差不多，肯定误差是不少
嘿嘿

来源：https://blog.csdn.net/ChengZiYa_/article/details/102732086

标签

农场