javaScript开心农场

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

[body]

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

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qq_45743129/article/details/102717477

版权

这篇博客介绍了如何使用JavaScript实现开心农场的互动效果。通过CSS设置图片样式和页面背景，HTML定义元素，然后用JavaScript编写点击事件，根据用户点击的内容改变图片和位置，达到交互目的。

摘要由CSDN通过智能技术生成

效果展示图
在这里插入图片描述

CSS代码

id选择器：设置图片样式以及页面背景效果

<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;