说明

和大家分享一个看上去很酷的效果，先来看效果图吧！

解释

实现这个效果的思路就是，一个大的div元素，设置好一个背景，生成一定数量小的div元素，背景设置成同样的图片，但是每个小div元素的 background-position 属性值不同，整齐的覆盖在大的div元素上，这样就能拼成一张完整的背景图，鼠标移入时，让所有小的div元素移动和变形。

总的来说就是两步：

1、生成小的div元素，整齐的覆盖在大的div元素上，像下图这样(为了方便看，把每个小div元素，分开了些)。

2、鼠标移入时，让所有小div元素动起来，主要是改变小div元素的left、top、opacity、transform属性的值

具体实现的代码也并不多，下面是注释很详细的代码。

完整代码

body {

overflow: hidden;

}

#container {

width: 400px;

height: 300px;

margin: 150px auto 0 auto;

position: relative;

}

window.onload = burst;

function burst() {

// ready 用来避免高频率的产生动画效果

var ready = true;

// 容器

var img = document.querySelector('#container');

// 动画时间,单位是s

var S = 1;

// 每行 R 个 碎片

var R = 4;

// 每列 C 个 碎片

var C = 7;

// 容器宽度

var W = parseInt(window.getComputedStyle(img)['width']);

// 容器高度

var H = parseInt(window.getComputedStyle(img)['height']);

// 控制碎片的范围

var N = 2;

// 碎片分散时，整个活动范围的宽

var maxW = N * W;

// 碎片分散时，整个活动范围的高

var maxH = N * H;

// 控制显示第 now 张图片

var now = 0;

// 保存图片路径的数组

var imgArr = [

'https://kkkk1000.com/images/ExplosionPictureSwitching/1.jpg',

'https://kkkk1000.com/images/ExplosionPictureSwitching/2.jpg',

'https://kkkk1000.com/images/ExplosionPictureSwitching/3.jpg',

];

img.style.background = 'url(' + imgArr[0] + ') no-repeat';

var next = function () {

return (now + 1) % imgArr.length;

}

img.onmouseover = function () {

// 如果ready 为false 不产生动画效果

if (!ready) return;

ready = false;

// 创建文档片段

var html = document.createDocumentFragment();

// 修改容器背景图

if (now + 1 >= imgArr.length) {

img.style.background = 'url(' + imgArr[0] + ') no-repeat';

} else {

img.style.background = 'url(' + imgArr[now + 1] + ') no-repeat';

}

// posArr 用来保存每个碎片的初始位置和结束位置，

var posArr = [];

var k = 0;

// 生成一定数量的小div元素，覆盖在容器上

for (var i = 0; i < R; i++) {

for (var j = 0; j < C; j++) {

posArr[k] = {

// left 代表碎片初始时的 left 值

left: W * j / C,

// top 代表碎片初始时的 top 值

top: H * i / R,

// endLeft 代表动画结束时的 left 值

endLeft: maxW * j / C - (maxW - (maxW - W) / C - W) / 2,

// endTop 代表动画结束时的 top 值

endTop: maxH * i / R - (maxH - (maxH - H) / R - H) / 2,

// (maxW-(maxW-W)/C-W)/2 和 (maxH-(maxH-H)/R-H)/2 是为了让碎片能在容器的周围散开

};

// 创建一个div，一个div就是一个碎片

var debris = document.createElement("div");

// url 用来表示碎片的背景图的路径

var url = imgArr[now];

// 初始时，碎片的样式

debris.style.cssText = `

position: absolute;

width: ${Math.ceil(W / C)}px;

height: ${Math.ceil(H / R)}px;

background: url(${url}) -${posArr[k].left}px -${posArr[k].top}px no-repeat;

left: ${posArr[k].left}px;

top: ${posArr[k].top}px;

opacity:1;

transition:${randomNum(0.1, S)}s ease;

`;

// 把创建的每个div，添加到文档片段中

html.appendChild(debris);

k++;

}

}

// 把文档片段 加到DOM树中

img.appendChild(html);

// 获取容器的所有子元素，也就是所有的碎片

var debrisAll = img.children;

// 改变每个碎片样式，实现动画效果

setTimeout(function () {

for (var i = 0; i < debrisAll.length; i++) {

var l = posArr[i].endLeft;

var t = posArr[i].endTop;

debrisAll[i].style.cssText += `

left : ${l}px;

top : ${t}px;

opacity :0;

transform:perspective(500px) rotateX(${randomNum(-180, 180)}deg) rotateY(${randomNum(-180, 180)}deg) rotateZ(${randomNum(-180, 180)}deg) scale(${randomNum(1.5, 3)});

`;

}

// 动画效果完成后

// 删除碎片

// 把ready 设置为true，可以再次产生动画效果

// 改变 now的值，也就是改变当前要显示的图片

setTimeout(function () {

img.innerHTML = '';

ready = true;

now = next();

}, S * 1000);

}, 100);

}

// 产生一个 n - m 之间的随机数

function randomNum(n, m) {

return Math.random() * (m - n) + n;

}

}