版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yRVUN9kW-1571977591648)(https://img-blog.csdnimg.c在这里插入代码片
n/20191025122616554.gif)]
<style type="text/css">
div{
font-size:12px;
border:#999 1px solid;
padding:5px;
}
#bg{ /*控制页面背景*/
width:456px;
height:266px;
background-image:url(formPhoto/plowland.jpg);
}
img{ /*控制图片*/
position:absolute;
top:85px;
left:195px;
}
#seed{ /*控制播种按钮*/
background-image:url(formPhoto/btn_seed.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:49px;
cursor:hand;
}
#grow{ /*控制生长按钮*/
background-image:url(formPhoto/btn_grow.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:154px;
cursor:hand;
}
#bloom{ /*控制开花按钮*/
background-image:url(formPhoto/btn_bloom.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:259px;
cursor:hand;
}
#fruit{ /*控制结果按钮*/
background-image:url(formPhoto/btn_fruit.png);
width:56px;
height:56px;
position:absolute;
top:229px;
left:368px;
cursor:hand;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#seed").on("click",function(){
$("img").remove(); //绑定播种按钮的单击事件
$("#bg").prepend("<img src='formPhoto/seed.png'/>") //移除img元素
});
$("#grow").on("click",function(){
$("img").remove(); //绑定播种按钮的单击事件
$("#bg").prepend("<img src='formPhoto/grow.png'/>") //移除img元素
});
$("#bloom").on("click",function(){
$("img").remove(); //绑定播种按钮的单击事件
$("#bg").prepend("<img src='formPhoto/bloom.png'/>") //移除img元素
});
$("#fruit").on("click",function(){ //绑定结果按钮的单击事件
$("<img src='formPhoto/fruit.png'/>").replaceAll("img");
});
});
</script>
<div id="bg">
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</div>