Jquery代碼 <script> $(function () { $("td").click(function () { var img = $(this).prop("id"); if (parseInt(img) + 3 < 10 && $("td[id=" + (parseInt(img) ...
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>
