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

随机推荐

【Python】directory字典类型
它的基本格式是(key是键,value是值): d = {key1 : value1, key2 : value2 } Example dir = {'Mic':1,'Sun':2} for k in ...
Android学习——Service（二）
今天来介绍Service的第二种使用方式,Bind方式 Bind方式启动服务 Bind方式和Start方式启动很类似,都是通过Intent来启动,不同的是,Bind方式需要传入三个参数,如下: Int ...
QT的动图加载
http://blog.csdn.net/u011619422/article/details/47342403
$.on()方法和addEventListener改变this指向
jQuery $.on()方法和addEventListener改变this指向标签(空格分隔): jQuery JavaScript jQuery $.on() jq的绑定事件使用$([selec ...
ZT 接口和实现分离
什么叫接口和实现分离,如何实现 [问题点数:20分,结帖人heronism] http://bbs.csdn.net/topics/310212385 http://blog.csdn.net/sta ...
APUE1.11:系统调用库函数
区别是: system call:提供一种最小接口,而库函数通常提供比较复杂的功能.
c++由string组成的struct初始化崩溃
struct _UserInfo { string username; string password; string ip; string port; } _UserInfo str={}; 这样就 ...
智能机器人“小昆”的实现（五）MainActivty的实现及项目结束
好了,一切准备工作都完成了,下面我们就可以真正的编写MainActivity了.在MainActivity中,我们要为ListView设定适配器,并为发送按钮设定点击事件.我们的逻辑就是点击发送按钮, ...
@SuppressWarnings注解用法详解
@SuppressWarnings注解用法详解今天来谈谈@SuppressWarnings注解的作用. J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条 ...
搭建nlp_server服务器
这是文档如何启动斯坦福NLP-Service 1.sudo apt-get install gearman-job-server安装gearman-server 2.启动gearman服务: gea ...

Jquery拼图

Jquery拼图的更多相关文章

随机推荐

热门专题