开心农场html代码,jquery实现简单的开心农场
效果图：
代码部分：
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;
}
$(document).ready(function(){
$("#seed").bind("click",function(){
$("img").remove();
$("#bg").prepend("
")
});
$("#grow").bind("click",function(){
$("img").remove();
$("#bg").append("
")
});
$("#bloom").bind("click",function(){
$("img").replaceWith("
")
});
$("#fruit").bind("click",function(){
$("
").replaceAll("img");
});
});
开心农场html代码,jquery实现简单的开心农场相关推荐
- 计算器ajax实现代码,jQuery实现简单的计算器特效代码
一款jquery实现简单计算器代码.该jquery计算器使用 Bootstrap 4进行布局,并结合math.js数学库,实现简单的加减乘除和平方,开方等数学计算.在页面中引入bootstrap 4, ...
- 用JQuery实现简单的开心农场小游戏
JQuery代码 <script type="text/javascript"> function nowTime(){var now=new Date();var y ...
- jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
- php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
- php 页面异步刷新,php+jQuery+Ajax简单实现页面异步刷新
php+jQuery+Ajax简单实现页面异步刷新 这里有新鲜出炉的 jQuery 示例,程序狗速度看过来! jQuery javascript 框架 jQuery 是一个兼容多浏览器的 javasc ...
- JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果 说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
- html5 jq点赞功能,jQuery实现简单的点赞效果
本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下 效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model ...
- 简易计算机在线使用方法,jQuery实现简单在线计算器方法
本文主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下,希望能帮助到大家. 先来看看运行效果图: 完整代码如下:/p ...
- 前端表格插件Jquery DataTable简单汉化
前端表格插件Jquery DataTable简单汉化 项目需要求,需要用到Jquery DataTable插件,功能强大,可以实现前端数据分页和页面检索,数据10000条类可以考虑.但由于国外插件,页 ...
最新文章
- 机器学习算法源码全解析（二）-范数规则化之L0、L1与L2范数
- 人工智能项目开发规划与准备
- 动态规划入门_数塔问题
- L1-045 宇宙无敌大招呼
- python从入门到实践django_Django入门——《Python编程从入门到实践》
- 计算机软件及其软件系统,计算机软件系统课件
- Linux内存管理：《Aarch64 Kernel Memory Management.pptx》
- Chome 浏览器，您的连接不是私密连接
- 关于绑定事件的一个疑惑
- c语言n的阶乘 longfact,如何定义函式fact(n) 计算n的阶乘：n!=1*2*……*n，函式返回值型别是double？...
- 51GIF GIF动图中文搜索平台，表情包发源地，GIF动图素材库
- 环信移动客服客服昵称头像设置
- Ubuntu安装MATLAB并设置桌面快捷方式!!!
- Moment js获取今日、昨天、这周、上周、本月、上月方法
- 【WINDOWS / DOS 批处理】for命令详解（三）
- JSP学习并实现的过程--day01
- 微信公众平台开发(93) 关闭微信浏览器
- 穿越火线游戏服务器停服维护中,cf停机维护
- 生产环境centos7 安装mysql 5.7.35
- stardict词典下载