Jquery拼图

Jquery代码

$(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">

</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)只 ...

随机推荐

Android SQLite案例
重点掌握execSQL()和rawQuery()方法,rawQuery()方法用于执行select语句. SQLiteOpenHelper,实现了onCreate和onUpgrade方法. 第一次创建 ...
Unity导出APk出错解决方法二
错误提示(需得打开编辑器log文件才能看到全部log,Unity3d只显示一部分): Error building Player: CommandInvokationFailure: Unable t ...
Unity创建或克隆对象 Instantiate（）
//需要创建对象 GameObject prefab; //创建对象的规定位置或父物体 Transform tr; //创建出对象 Instantiate(prefab); //创建对象,并设定位置和 ...
restful知识点之一CBV
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^FBVTEST/', views.FBV_Test.as_view()), ] url ...
Java—IO流对象的序列化和反序列化
序列化的基本操作 1.对象序列化,就是将Object转换成byte序列,反之叫对象的反序列化. 2.序列化流(ObjectOutputStream),writeObject 方法用于将对象写入输出流中 ...
Windows ->> FIX: “The security database on the server does not have a computer account for this workstation trust relationship”
前几天在做AlwaysOn实验时遇到搭建活动目录域时某台已经加入AD的机器无法以域管理员账户登录的情况. 报错信息是:The security database on the server does ...
win+ R下的常见命令
-------------------------电脑运行常见命令----------------------------- Windows+R输入cmd 运行net start mssqlserve ...
Thread.Join()的详解
什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的. 什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄 ...
flashback回收站知识汇总
查看回收站是否开启:SELECT Value FROM V$parameter WHERE Name = 'recyclebin'; 查看回收站中的数据:SELECT * FROM DBA_RECYC ...
July 10th 2017 Week 28th Monday
I get that look a lot, but I never let it get to me. 我常常受到异样的目光,但我从不把它们放在眼里. I don't feel good these ...

Jquery拼图

Jquery拼图的更多相关文章

随机推荐

热门专题