JQuery实现简单小农场

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的开心小农场</title>
<style type="text/css">div{font-size:12px;border:#999 1px solid;padding:5px;}#bg{      /*控制页面背景*/width:456px;height:266px;background-image:url(plowland.jpg);}img{     /*控制图片*/position:absolute;top:85px;left:195px;}#seed{       /*控制播种按钮*/background-image:url(btn_seed.png);width:56px;height:56px;position:absolute;top:229px;left:49px;cursor:hand;}#grow{       /*控制生长按钮*/background-image:url(btn_grow.png);width:56px;height:56px;position:absolute;top:229px;left:154px;cursor:hand;}#bloom{     /*控制开花按钮*/background-image:url(btn_bloom.png);width:56px;height:56px;position:absolute;top:229px;left:259px;cursor:hand;}#fruit{        /*控制结果按钮*/background-image:url(btn_fruit.png);width:56px;height:56px;position:absolute;top:229px;left:368px;cursor:hand;}
</style>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">$(document).ready(function(){var img = "<img src='plowland.jpg' />";$("#bg").on("click",function(e){$(img).prependTo("#bg").css("left", e.pageX - 50).css("top", e.pageY - 60);});$("#seed").on("click",function(e){img = "<img src='seed.png' />";});$("#grow").on("click",function(e){img = "<img src='grow.png' />";});$("#bloom").on("click",function(e){img = "<img src='bloom.png' />";});$("#fruit").on("click",function(e){img = "<img src='fruit.png' />";});});
</script>
</head><body>
<div id="bg"><span id="seed"></span><span id="grow"></span><span id="bloom"></span><span id="fruit"></span>
</div>
</body>
</html>

效果图

JQuery实现简单小农场相关推荐

jQuery实现简单的农场小游戏
首先我们要准备插入的图片然后是代码 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
JQuery的几个简单小案例（基础）
JQuery的几个简单小案例实现表格的的隔行换色实现复选框的全选与全不选 QQ表情的选择多选下拉列表的左右移动实现表格的的隔行换色需求:事先制作一个如图所示的table表格,将数据行的奇数行 ...
jquery-1 jquery几个小实例
jquery-1 jquery几个小实例一.总结一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
jquery前端简单分页_如何使用jQuery创建简单的分页
jquery前端简单分页 How to create easy pagination with jQuery jQuery pagination. All we know, that when we ...
jQuery的简单介绍
jQuery的简单介绍 /* *JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码 *jQuery是JavaScript框架库中的一种 *jQuery的 ...
计算机制作统计图报告,jQuery制作简单的柱状图(数据统计报表)
前段时间使用HTML+CSS制作了一个柱状图,今天将Javascript版的也分享一下,没用做成插件的形式,只需要调用一个函数即可,功能比较简单,使用起来也算方便,只需要将json数据传入给该函数即可 ...
Jquery一个简单的点赞效果，实现点赞数+1
Jquery一个简单的点赞效果,实现点赞数+1 1.导入JS <script src="js/jquery-3.3.1.js" type="text/javascr ...
如何使用jQuery实现简单轮播效果
如何使用jQuery实现简单轮播效果如何使用jQuery实现简单的轮播效果,事例如下: 在Htlm中封装一个大盒子为cont(可以自行定义类名),其中放置2个类名分别为con(可以自行定义类名).h ...
linux脚本石英钟,原生JS实现的简单小钟表功能示例
本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: www.jb51.net 钟表 body { background-color:#00A2 ...

JQuery实现简单小农场

JQuery实现简单小农场

JQuery实现简单小农场相关推荐

最新文章

热门文章