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

随机推荐

dialog problem overview
一 Datasets 1. ubuntu chat corpus: http://daviduthus.org/UCC/2. dialogue datasets (circa 2005) 二 Tas ...
vs2015使用技巧-------- 查看类关系图
1.在项目上点击右键,点击“查看”------->“查看类图”: 2.生成的类图如下:
ES6/ES2015常用知识点和概念
越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日, ...
webstorm javascript IDE调试
webstorm是我见过的前端开发调试最好用的IDE工具了,它不仅具有强大的编辑,代码查阅引用功能,更有强大的js调试功能,这是任何通过firebug,chrome devtool,console.l ...
centOS 7 简单设置（虚拟机）
1.修改主机名 hostnamectl set-hostname 2.ssh连接慢的问题解决 vim /etc/ssh/sshd_config UseDNS=no GSSAPIAuthenticati ...
for循环里面的break;和continue;语句
for循环里面的break;和continue;语句 break语句哇,我已经找到我要的答案了,我不需要进行更多的循环了! 比如,寻找第一个能被5整除的数: for循环中,如果遇见了break语句, ...
Spring学习总结之---装配Bean
Spring配置的可选方案前言:Spring容器负责创建应用程序中的bean并通过DI来协调这些对象之间的关系,作为开发人员,你需要告诉Spring容器要创建那些Bean,以哪种方式创建,并且如何将 ...
为什么S/4HANA的销售订单创建会触发生产订单的创建
调用S/4HANA销售订单创建函数SD_SALES_DOCU_MAINTAIN创建一个销售订单时,会触发生产订单的创建. 销售订单的每个行项目对应一个独立的生产订单,SD_SALES_DOCU_MAI ...
awk的简单使用
awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...
xml-apis-ext.jar
xml-apis-ext.jar,hightcharts导出图片是解决乱码需要用到的一个包

Jquery拼图

Jquery拼图的更多相关文章

随机推荐

热门专题