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. MARS3.6 Programming

    An Assembly Language I.D.E. To Engage Students Of All Levels * A Tutorial *2007 CCSC: Central Plains ...

  2. vs2010开发activex（MFC）控件/ie插件(一)

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50782904  vs2010开发activex(MFC)控件:      第一步:生成ac ...

  3. sqlserver批量删除表

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

  4. 柔性数组成员 (flexible array member)-C99-ZZ

    学习flexible array member是因为阅读Redis源码遇到的,sds.h中一开始就用到了. ============================================== ...

  5. W3School学习网站

    http://www.w3school.com.cn/tags/att_form_autocomplete.asp

  6. 一个老IT产品管理者对于产品经理工作的经验总结

    一个老IT产品管理者对于产品经理工作的经验总结 1. 任何行业,包括IT行业,所谓产品管理.产品经理,其核心应该是企业产品管理制度,也就是说,只有企业存在相应的.合理的产品管理体系和制度,产品管理.产 ...

  7. June 27th 2017 Week 26th Tuesday

    Happiness takes no account of time. 幸福不觉光阴过. At the beginning of this week, I planned to make some s ...

  8. Apache PredictionIO在Docker上的搭建及使用

    1.Apache PredictionIO介绍 Apache PredictionIO 是一个孵化中的机器学习服务器,它可以为为开发人员和数据科学家创建任何机器学习任务的预测引擎.官方原文: Apac ...

  9. ctrl + alt + o 快速删除掉没有使用的 import

    ctrl + alt + o  优化导入,可以快速删除掉没有使用的 import

  10. springmvc常用注解标签详解(转载)

    1.@Controller 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ...