Jquery拼图

作者: 欧罗提拉稀
来源: 51数据库
2021-07-10

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

<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>