Jquery拼图
Jquery代码
<script>
$(function () {
$("td").click(function () {
var img = $(this).prop("id");
if (parseInt(img) + 3 < 10 && $("td[id=" + (parseInt(img) + 3) + "]").children().length == 0) {//向下
$(this).find("img").appendTo($("td[id=" + (parseInt(img) + 3) + "]"));
} else if (parseInt(img) - 3 >0 && $("td[id=" + (parseInt(img) - 3) + "]").children().length == 0) {//向上
$(this).find("img").appendTo($("td[id=" + (parseInt(img) - 3) + "]"));
} else if (parseInt(img) % 3 != 0 && $("td[id=" + (parseInt(img) + 1) + "]").children().length == 0) {//向右
$(this).find("img").appendTo($("td[id=" + (parseInt(img) + 1) + "]"));
} else if (parseInt(img) % 3 != 1 && $("td[id=" + (parseInt(img) - 1) + "]").children().length == 0) {//向左
$(this).find("img").appendTo($("td[id=" + (parseInt(img) - 1) + "]"));
}
});
});
</script>
html代码
<body style="font-size:12px;">
<div class="box">
<span style="color:Red;font-weight:bold;"></span>请使用JQuery完成拼图功能。<br />
只要求能够实现每一幅小图能够正确变动位置即可。
</div>
<div id="temp"></div>
<div class="box">
<table id="table1" class="mytable">
<tr>
<td id="1">
<img src="Files/01.gif" /></td>
<td id="2">
<img src="Files/02.gif" /></td>
<td id="3">
<img src="Files/03.gif" /></td>
</tr>
<tr>
<td id="4">
<img src="Files/04.gif" /></td>
<td id="5">
<img src="Files/05.gif" /></td>
<td id="6">
<img src="Files/06.gif" /></td>
</tr>
<tr>
<td id="7">
<img src="Files/07.gif" /></td>
<td id="8">
<img src="Files/08.gif" /></td>
<td id="9"></td>
</tr>
</table>
</div>
</body>
Jquery拼图的更多相关文章
- jQuery拼图小游戏
jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
- jQuery照片墙相册
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/30.htm 本特效支持jquery的版本为1.4.3,暂时不支持1.9以上jquery版本. 代码: < ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- 在HTML页面中有jQuery实现实现拼图小游戏
1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:
- jQuery实现简单的拼图游戏
一,实现拼图的搭建: <div class="box"> <table id="table1" class="mytable&quo ...
- 一款基于jQuery/CSS3实现拼图效果的相册
之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度 ...
- 基于jQuery/CSS3实现拼图效果的相册插件
今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...
- jQuery之-拼图小游戏
在线实例:http://lgy.1zwq.com/puzzleGame/ 源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只 ...
随机推荐
- strcmp和stricmp、strcmpi三者之间的区别(C++)
原文:http://www.cnblogs.com/tankeee/p/3957629.html #include <string.h> #include <stdio.h> ...
- java操作svn【svnkit】实操
SVNKit中怎样使用不同的仓库访问协议? 当你下载了最新版的SVNKit二进制文件并且准备使用它时,一个问题出现了,要创建一个库需要做哪些初始化的步骤?直接与Subversion仓库交互已经在低级层 ...
- vscode:配置git
1.下载git,并找到安装git的文件位置,并找到git文件夹下面的Bin文件夹 2.配置环境变量 位置:右击‘计算机’->属性->高级系统设置->环境变量 最后点击确定即可 ...
- C++ 的编译过程
Recall that g++ is not actually the C++ compiler – it is a driver program that hides a lot of the co ...
- 10个出色的NoSQL数据库(转)
随着大数据的不断发展,非关系型的数据库现在成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.现今的计算机体系结构在数据存储方面要有庞大的水平扩展性,而NoSQL也正是致力于改变这一现状.目前G ...
- poj 3414 Pots 【BFS+记录路径 】
//yy:昨天看着这题突然有点懵,不知道怎么记录路径,然后交给房教了,,,然后默默去写另一个bfs,想清楚思路后花了半小时写了120+行的代码然后出现奇葩的CE,看完FAQ改了之后又WA了.然后第一次 ...
- Java程序员从笨鸟到菜鸟之(九十六)深入java虚拟机(五)——java本地接口JNI详解
http://blog.csdn.net/csh624366188/article/details/8063144 对于Java程序员来说,java语言的好处和优点,我想不用我说了,大家自然会说出很多 ...
- Java---页面之间传值跳转
从首页A进入页面B,然后从B页面登录,成功后跳转到A页面,并打印一句话“登录成功”,传值需要用的后台的. 在B页面写: <% session.setAttribute("key ...
- libconfig C++ 学习笔记
1. C++API 头文件 #include <libconfig.h++> ,命名空间:using namespace libconfig; 2.多线程使用问题: (1)libconfi ...
- SqlMapConfig.xml配置文件
SqlMapConfig.xml中配置的内容和顺序如下: 1.1 properties(属性) mybatis的属性加载顺序.读取顺序:properties------>resource或url ...