本案例需求：
照片按照螺旋矩阵方式慢慢褪去
使用到：
- remove()函数：将当前标签及其子标签一并清除
- empty()函数：将当前标签子标签进行清除处理（只清楚子标签）
- fadeIn(过渡时间)函数：淡入，从透明0到逐渐过渡到1
- fadeOut(过渡时间)函数：淡出，从透明1逐渐过渡到0
- addClass(class值)：给标签添加class
- removeClass(class值)：删除标签中的class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
@keyframes donghua {
0% {
transform: scale(1);
opacity: 1;
}
100%{
transform: scale(0.5);
opacity: 0;
}
}
.split{
animation: donghua 1s forwards;
}
#app{
width: 750px;
height: 500px;
position:absolute;
border:1px solid #000000;
top: calc((100vh - 500px) / 2);
left: calc((100vw - 750px) / 2);
}
#app>div{
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
}
#app>.btn{
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
}
#app>.btn>li{
width: 20px;
height:20px;
background: #9B9B9B;
list-style: none;
float:left;
margin: 0 5px;
opacity: 0.5;
box-sizing: border-box;
border:2px solid #ffffff;
border-radius:10px;
}
#app>.btn>li:hover{
border-color: #9B9B9B;
background: #ffffff;
}
#app>p{
position:absolute;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
$(function(){
// 定义图片的数组
const images = [
'img/1.jpg',
'img/4.jpg',
'img/8.jpg',
'img/13.jpg',
'img/19.jpg'
]
// 定义第几个要飞出
let n = images.length - 1
// 定义小块的边长为 50
const side = 50
// 计算 有多少列
const column_count = 750 / side
// 计算 有多少行
const row_count = 500 / side
const ul = $('<ul class="btn"></ul>')
for(let i = 0; i < images.length; i++) {
$('<div></div>').css({
background: 'url(' + images[i] + ')'
}).appendTo($('#app'))
$('<li></li>').appendTo(ul)
}
ul.appendTo($('#app'))
$('.btn>li').click(function(){
// 每次点击的时候先清理掉原先的碎片
$('#app>p').remove()
// 要知道点击的是哪个li 还要获取点击li 排在兄弟当中第几个
const index = $(this).index()
if(index !== n) {
// 点击的是第几个li 就让第几个图片 显示 其他的隐藏
$('#app>div').eq(index).fadeIn(1000).siblings('div').fadeOut(1000)
// 图片飞出
// 定义开始行索引和开始列索引
let startx = 0
let starty = 0
// 定义结束行所以和结束列索引
let endx = row_count - 1
let endy = column_count - 1
// 定义摆放的索引
let x = 0
let y = 0
// 先把块放上
for(let i = 0; i < row_count * column_count; i++) {
const p = $('<p></p>').css({
width: side + 'px',
height: side + 'px',
background: 'url(' + images[n] + ')',
'background-position': (y * side * -1) + 'px ' + (x * side * -1) + 'px',
top: (side * x) + 'px',
left : (side * y) + 'px'
})
p.appendTo($('#app'))
setTimeout(function(){
p.addClass('split')
},30 * i)
if(x === startx && y < endy) {
y++
} else if( y === endy && x < endx) {
x++
} else if(x === endx && y > starty) {
y--
} else {
x--
}
if(y === starty && x === startx + 1) {
startx ++
starty ++
endx --
endy --
}
}
// 本次 索引 index 应该是 下次飞出的 n值
n = index
}
})
})
</script>
</body>
</html>
