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>