我的欢乐小农场

最新推荐文章于 2021-06-07 20:32:14 发布

ChengZiYa_

最新推荐文章于 2021-06-07 20:32:14 发布

阅读量482

点赞数 1

文章标签： js css html

本文链接：https://blog.csdn.net/ChengZiYa_/article/details/102732086

版权

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

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

感觉是不是特别像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农场差不多，肯定误差是不少
嘿嘿

ChengZiYa_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
我的欢乐小农场

看见这个图自我感觉回到了小学看见这个图自我感觉回到了小学感觉是不是特别像QQ农场首先来看一下css样式<style type="text/css">div{ font-size:12px; border:#999 1px solid; padding:5px;}#bg{ /*控制页面背景*/ width:456px; height:266px; backgr...
复制链接

扫一扫