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. Python爬虫教程-18-页面解析和数据提取

    本篇针对的数据是已经存在在页面上的数据,不包括动态生成的数据,今天是对HTML中提取对我们有用的数据,去除无用的数据 Python爬虫教程-18-页面解析和数据提取 结构化数据:先有的结构,再谈数据 ...

  2. 关于建立Android工程R文件丢失的问题

    今天开始学习Android了,好久没打开eclipse,建立Android工程老是报错,于是手残的把appcompat-v7给删了,然后建立工程以后重新出来的appcompat-v7有个小叉号,百度了 ...

  3. 【Python】内置方法pop

    此时 a,b 指向的地址所存的内容均被更改

  4. Linux命令 标签： linux 2016-08-01 10:26 508人阅读 评论(0) 收藏

    Linux常用命令 文件.目录的基本操作 ls - 查看文件 cp - 拷贝文件 mv - 移动或重命名文件 rm - 删除文件 touch - 创建空文件或更新文件时间 cd - 改变当前路径 pw ...

  5. 设计模式：访问者（Visitor）模式

    设计模式:访问者(Visitor)模式 一.前言    什么叫做访问,如果大家学过数据结构,对于这点就很清晰了,遍历就是访问的一般形式,单独读取一个元素进行相应的处理也叫作访问,读取到想要查看的内容+ ...

  6. MapReduce编程中常用的字符操作

    本文主要用于记录自己在编写mapreduce程序时常用的一些方法,后期会不断更新,用于自己复习和给新手一些帮助. 字符串操作 String str = " 12345"; // 字 ...

  7. 不错的.net开源项目

    Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...

  8. geos学习笔记：安装和使用

    1.首先在https://trac.osgeo.org/geos下载geos-3.6.2.tar.bz2 解压后 cd geos- ./configue //或选择安装的目录./configure - ...

  9. pcel安装的mongodb的两个问题的解决方案

    最近工作需要,要使用mongodb,这个是使用 pecl 安装的,跟标准的 mongo 使用还是有区别的,这里不讲区别,只讲两个比较典型的问题该如何处理,具体的文档大家可以直接参考 php 的官方文档 ...

  10. css3中的变形 transform详解

    一.变形-旋转 ratate()函数 通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这 个 ...