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拼图的更多相关文章

  1. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

  2. 9款超酷的jQuery/CSS3插件

    Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...

  3. jQuery照片墙相册

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/30.htm 本特效支持jquery的版本为1.4.3,暂时不支持1.9以上jquery版本. 代码: < ...

  4. jQuery实现拼图小游戏

    小熊维尼拼图                                                                                    2017-07-23 ...

  5. 在HTML页面中有jQuery实现实现拼图小游戏

    1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:

  6. jQuery实现简单的拼图游戏

    一,实现拼图的搭建: <div class="box"> <table id="table1" class="mytable&quo ...

  7. 一款基于jQuery/CSS3实现拼图效果的相册

    之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度 ...

  8. 基于jQuery/CSS3实现拼图效果的相册插件

    今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...

  9. jQuery之-拼图小游戏

    在线实例:http://lgy.1zwq.com/puzzleGame/ 源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只 ...

随机推荐

  1. maven项目怎么引入另一个maven项目

    yi      最近在做项目的时候,遇到多模块(mudul)开发,里面的maven包相互引用,刚开始不知道怎么导入,费了好大尽总算搞定了.把遇到的问题记录下. 1.怎么导入依赖的maven模块 选择I ...

  2. sqlserver批量删除表

    --批量删除表 ) DECLARE tmpCur CURSOR FOR SELECT name FROM sys.objects WHERE TYPE='U' AND name LIKE N'%_Qu ...

  3. SQL SERVER ->> IDENTITY相关函数

    IDENTITY函数 -- 只能用在SELECT INTO语句中,用于在插入数据的时候模拟IDENTITY属性的作用生成自增长值. ,) AS ID_Num INTO NewTable FROM Ol ...

  4. IOS生成同时支持armv7,armv7s,i386的静态库.a文件

    许多第三方提供的.a文件(一般是那些SDK),嵌入到我们的xcode项目后,生成不会报错. 一部分粗心的SDK提供方,或者我们自己做的.a文件,就会有报错,常见的就是不是armv7结构,或者不是arm ...

  5. Redis入门实例(Redis+Sprint+maven创建工程)

    一.>创建一个maven工程应用和相关配置:Redis_study,创建工程应用过程略 1.>配置pom.xml:文件内容如下 <project xmlns="http:/ ...

  6. Java集合工具类

    import java.util.ArrayList; import java.util.Collection; import java.util.List; import java.util.Map ...

  7. xcode9 unity3d 新坑

    1.metal调试会报错,要在edit scheme里关掉

  8. Path模块部分常用函数解析——NodeJS

    官网地址:https://nodejs.org/api/path.html path.resolve([...paths])# Added in: v0.3.4 参数[...paths]: <S ...

  9. MATLAB入门学习（整合）

    整合一下,都是链接地址: MATLAB入门学习(一):初次使用.. MATLAB入门学习(二):矩阵相关 MATLAB入门学习(三):矩阵常用函数 MATLAB入门学习(四):编写简单.m文件和函数文 ...

  10. mysql配置远程登录

    1.vim /etc/my.cnf注释这一行:bind-address=127.0.0.1 ==> #bind-address=127.0.0.1 2.重启服务:sudo service mys ...