效果
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>碎片</title>
<style>
*{
margin:0;
padding:0;
}
body{
height:100vh;
display: flex;
}
@-webkit-keyframes donghua {
0% {
opacity: 1;
transform: scale(1);
}
100% {opacity: 0;transform: scale(0.5);}
}
#wrap{
width:750px;
height:500px;
border:1px solid #000000;
margin:auto;
position:relative;
}
#wrap>div{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
}
#wrap>#btn {
position: absolute;
bottom:10px;
z-index:1;
left:50%;
}
#wrap>#btn>li{
list-style: none;
width:20px;
height:20px;
float:left;
margin-left:10px;
border-radius: 10px;
border:2px solid #00FF00;
background:#FF0000;
box-sizing: border-box;
opacity: 0.7;
cursor: pointer;
right: 50%;
position: relative;
}
#wrap>#btn>li:hover{
background: #55007F;
}
.split{
-webkit-animation: donghua 1s forwards;
transition-duration: 0.5s;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="btn"></ul>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(()=>{
const array = [
'images/1.jpg',
'images/4.jpg',
'images/13.jpg',
'images/17.jpg',
'images/2.jpg'
]
let prev = array.length - 1
const side = 50
const $btn = $('#btn')
const $wrap = $('#wrap')
const row = parseInt($wrap.height() / side)
const column = parseInt($wrap.width() / side)
const pos = -100
function creatediv() {
for(let i = 0; i < array.length; i++) {
let div = $('<div></div>')
div.css({
'background':'url(' + array[i] + ')'
})
div.appendTo($wrap)
$('<li></li>').appendTo( $btn )
}
}
creatediv()
$('#wrap>#btn>li').click(function(){
$('#wrap>p').remove()
const index = $(this).index()
$('#wrap>div').eq(index).fadeIn(1000).siblings('div').fadeOut(1000)
let img = array[prev]
for(let i = 0 ; i <row;++i){
for(let j=0;j<column;++j){
const p = $('<p></p>')
p.css({
'width': side + 'px',
'height': side + 'px',
'background':'url(' + img + ')',
'position': 'absolute',
'top': i * side + 'px',
'left': j * side + 'px',
'background-position': '-' + (i * side) + 'px -' + (j * side) + 'px'
})
$wrap.append(p);
setTimeout(()=>{
p.addClass('split');
p.css('top', pos + i * side + 'px')
p.css('left', pos + j * side + 'px')
}, (i+j) * 30)
}
}
prev = index
})
})
</script>
</body>
</html>