javaScript开心农场

最新推荐文章于 2025-11-18 09:54:56 发布

原创最新推荐文章于 2025-11-18 09:54:56 发布 · 1.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

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

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

CSS代码

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

<style type="text/css">
div{
	font-size:12px;
	border:#999 1px solid;
	padding:5px;
}
#bg{
    /*控制页面背景*/
	width:456px;
	height:266px;
	background-image:url(https://blog.csdn.net/images/plowland.jpg);
}
img{
    /*控制图片*/
	position:absolute;
	top:85px;
	left:195px;
}
#seed{
    /*控制播种按钮*/
	background-image:url(https://blog.csdn.net/images/btn_seed.png);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:49px;
	cursor:hand;
}
#grow{
    /*控制生长按钮*/
	background-image:url(https://blog.csdn.net/images/btn_grow.png);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:154px;
	cursor:hand;
}
#bloom{
    /*控制开花按钮*/
	background-image:url(https://blog.csdn.net/images/btn_bloom.png);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:259px;
	cursor:hand;
}
#fruit{
    /*控制结果按钮*/
	background-image:url(https://blog.csdn.net/images/btn_fruit.png);
	width:56px;
	height:56px;
	position:absolute;
	top:229px;
	left:368px;
	cursor:hand;
}
    .border{
        border: 1px solid whitesmoke;
    }
  .a{
    border: 0px;
  }
</style>

开心农场图片

在这里插入图片描述

HTML代码

设置Id

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

js代码

根据点击内容不同的图片和位置设置相应的点击事件

<script type="text/javascript">
    var img ;
	$(document).ready(function(){

	  function f(){//根据点击内容显示不同的图片
	    $('#bg').off();//删除上次为$('#bg')设置的点击事件
		$("#bg").on("click",function(e){
            $("<img src='images/"+img+"'/>").prependTo("#bg").css("top",e.clientY-60).css("left",e.clientX-45).on('click',function () {
              $(this).remove();
            });
        });
      }
        $("#seed").on("click",function(){   //绑定结果按钮的单击事件
          $('span').removeClass('border');//将所有span上的边框样式删掉
          $(this).addClass('border');//给点击的span加样式
            img = "seed.png";
             f();
        });
        $("#grow").on("click",function(){			//绑定生长按钮的单击事件
          $('span').removeClass('border');
          $(this).addClass('border');
          img = "grow.png";
          f();
		});
		$("#bloom").on("click",function(){		//绑定开花按钮的单击事件
          $('span').removeClass('border');
          $(this).addClass('border');
            img = "bloom.png";
          f();
		});
        $("#fruit").on("click",function(){			//绑定结果按钮的单击事件
          $('span').removeClass('border');
          $(this).addClass('border');
            img = "fruit.png";
          f();
        });
    });

</script>