js+jQuery 打造我的快乐小农场

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

南宫廿贰

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

阅读量978

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43330884/article/details/102730334

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

大家直接看代码吧：
效果图：在这里插入图片描述

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>我的开心小农场</title>
		<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;
			}
		</style>
		<script src="JS/jQuery.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var img = "images/seed.png";
				$("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>
	</head>

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