JQ实现简单的拼图效果

<style>
.zong {
width: 757px;
height: 764px;
margin: 0 auto;
}

.zong table {
width: 757px;
height: 764px;
border: solid 1px cyan;
}
</style>

<div class="zong">
<table>
<tr>
<td><img src="img/01.gif"></td>
<td><img src="img/02.gif"></td>
<td><img src="img/03.gif"></td>
</tr>
<tr>
<td><img src="img/04.gif"></td>
<td><img src="img/05.gif"></td>
<td></td>
</tr>
<tr>
<td><img src="img/07.gif"></td>
<td><img src="img/08.gif"></td>
<td><img src="img/09.gif"></td>
</tr>
</table>
</div>

<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
$(function() {
var arr = Array();

var tds = $('td');
var imgs = $('td img').remove();
while(arr.length < 8) {
ran();
}
for(var i = 0; i < tds.length; i++) {
tds.eq(i).append(imgs[arr[i]]);
}

function ran() {
var num = parseInt(Math.random() * 8);
for(var i = 0; i < arr.length; i++) {
if(arr[i] == num) {
return;
}
}
arr.push(num);
}
tds.click(function() {
var indes = $('td').index($(this));
// var top = $(this).parent().prev().children().eq(indes);
// var bottom = $(this).parent().next().children().eq(indes);
// var left = $(this).eq(indes);
// var right = $(this).eq(indes);
var empts = $('td').index($('td:not(":has(img)")'));
// var empts = $('td:empty').index();
if(indes == 2 && empts ==3 || indes == 3 && empts ==2){
return false;
}
if(indes == 5 && empts ==6 || indes == 6 && empts ==5){
return false;
}
if(indes + 1 == empts || indes - 1 == empts || indes + 3 == empts || indes - 3 == empts) {
$(this).children().appendTo($('td:not(":has(img)")'));
}

})
});
</script>

转载于:https://www.cnblogs.com/12136tyq/p/6737399.html