jq 九宮格 類似華容道效果
![九宮格]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#main {
width: 330px;
height: 340px;
margin: 100px auto;
position: relative;
border: 1px solid black;
}
#main div {
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
div img {
width: 100px;
height: 100px;
display: block;
position: absolute;
border: 1px solid black;
}
</style>
<script src="./jquery-3.4.1.js"></script>
</head>
<body>
<div id="main">
<div><img src="./1.jpg" alt=""></div>
<div><img src="./2.jpg" alt=""></div>
<div><img src="./3.jpg" alt=""></div>
<div><img src="./4.jpg" alt=""></div>
<div></div>
<div><img src="./5.jpg" alt=""></div>
<div><img src="./6.jpg" alt=""></div>
<div><img src="./7.jpg" alt=""></div>
<div><img src="./8.jpg" alt=""></div>
</div>
<script>
let str = [];
$('#main div').each((i, elem) => {
str[i] = new Array();
str[i][0] = $(elem).position().left;
str[i][1] = $(elem).position().top;
})
$('#main div').each((i, elem) => {
$(elem).css({
position: 'absolute',
left: str[i][0],
top: str[i][1]
})
})
let attr = [
[1, 3],
[1, -1, 3],
[-1, 3],
[-3, 1, 3],
[1, -1, 3, -3],
[-1, -3, 3],
[1, -3],
[1, -1, -3],
[-1, -3]
];
let a;
let b = 0;
dong()
function dong() {
$('#main div').each(function (i, elem) {
if ($(elem).find('img').length == 0) {
attr[i] = attr[i].filter((item) => item != (-b));
a = Math.floor(Math.random() * attr[i].length);
let left = $('#main div').eq(i + attr[i][a]).position().left
let top = $('#main div').eq(i + attr[i][a]).position().top
$('#main div').eq(i + attr[i][a]).animate({ left: i % 3 * 110, top: Math.floor(i / 3) * 110 }, 1000, function () {
$('#main div').eq(i).html($(this).html());
$(this).html('').css({ left, top });
dong()
})
b = attr[i][a];
return false;
}
})
}
</script>
</body>
</html>
