【第四章】我的开心小农场

最新推荐文章于 2024-04-10 05:42:17 发布

JavaScript豆豆

最新推荐文章于 2024-04-10 05:42:17 发布

阅读量568

点赞数

本文链接：https://blog.csdn.net/qq_45695622/article/details/102839443

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的开心小农场</title>
		<script language="JavaScript" src="js/jquery-1.11.1.min.js"></script>
	</head>
	<body>
		<script src="../js/jquery-1.11.1.min.js"></script>
		<script src="../js/jquery.pngFix.js"></script>
		<script src="../js/jquery.pngFixFix.pack.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
					$("#bg").pngFix();
				});
		</script>
		<div id="bg">
			<span id="seed"></span>
			<span id="grow"></span>
			<span id="bloom"></span>
			<span id="fruit"></span>
		</div>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#seed").bind("click",function(){
					$("#temp").remove();
					$("#bg").prepend("<span id='temp'><img src='images/seed.png'/></span>");
				});
				$("#grow").bind("click",function(){
					$("#temp").remove();
					$("#bg").append("<span id='temp'><img src='images/grow.png'/></span>");
				});
				$("#bloom").bind("click",function(){
					$("#temp").replaceWith("<span id='temp'><img src='images/bloom.png'/></span>");
					});
				$("#fruit").bind("click",function(){
					$("<span id='temp'><img src='images/fruit.png'/></span>").replaceAll("#temp");
					});
				$("#seed,#grow.#bloom,#fruit").bind("click",function(){
					$("#temp").pngFix();
					$("#temp").css({"position":"absolute","top":"85px","left":"195"});
									});
			});
		</script>
	</body>
</html>

JavaScript豆豆

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【第四章】我的开心小农场

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>我的开心小农场</title> <script language="JavaScript" src="js/jquery-1.11.1.min.js"></script>...
复制链接

扫一扫