JQuery做的一个农场
Css代码
<style>
*{
margin: 0;
}
.iBg{
/*背景*/
width:80%;
height: 100%;
position:absolute;
top:0px;
left:0px;
background: url("img/farm.jpg");
}
img{
/*控制图片*/
position:absolute;
top:85px;
left:195px;
}
#seed{
/*控制播种按钮*/
background-image:url(img/btn_seed.png);
width:56px;
height:56px;
position:absolute;
top:690px;
left:250px;
cursor:hand;
}
#grow{
/*控制生长按钮*/
background-image:url(img/btn_grow.png);
width:56px;
height:56px;
position:absolute;
top:690px;
left:350px;
cursor:hand;
}
#bloom{
/*控制开花按钮*/
background-image:url(img/btn_bloom.png);
width:56px;
height:56px;
position:absolute;
top:690px;
left:450px;
cursor:hand;
}
#fruit{
/*控制结果按钮*/
background-image:url(img/btn_fruit.png);
width:56px;
height:56px;
position:absolute;
top:690px;
left:550px;
cursor:hand;
}
.border{
border: 5px solid coral;
border-radius: 30px;
}
JQuery代码
<script>
var img ;
$(document).ready(function(){
$('#bg').on('click',function () {
console.log('Y:'+event.clientY+'X:'+event.clientX);
})
function f(){
$('#bg').off();
$("#bg").on("click",function(e){
if(e.clientX>84&&e.clientX<1469&&e.clientY>262&&e.clientY<724){
$("<img src='img/"+img+"'/>").prependTo("#bg").css("top",e.clientY-40).css("left",e.clientX-50).on('click',function () {
$(this).remove();
});
}else{
$('#bg').off();
}
});
}
$("#seed").on("click",function(){
$('span').removeClass('border');
$(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>
效果图