<!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>
<link rel = "stylesheet" href = "demo.css">
</head>
<body>
<div class="wrapper">
<div class="imgBox">
<!-- <img src="./pic/1.jpg" alt=""> -->
</div>
<button class = "btn">点我呀</button>
</div>
<script src = demo.js></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background: #7b7b7b;
}
.wrapper{
width: 70%;
margin: 100px auto;
border: 1px solid black;
height: 800px;
position: relative;
}
.imgBox{
width: 1000px;
height: 600px;
border: 1px solid #fff;
margin: 50px auto;
perspective: 700px;
}
.imgBox img{
width: 200px;
height: 150px;
float: left;
}
.btn{
width: 100px;
height: 40px;
background: none;
border: 1px solid #ccc;
cursor: pointer;
margin-left: -50px;
left: 50%;
position: absolute;
bottom: 20px;
background-color: #ccc;
}
function init() {
addImg();
}
init();
var img;
var flag = true;
function addImg() {
var imgBox = document.getElementsByClassName('imgBox')[0];
for (var i = 0; i < 20; i++) {
var num = Math.floor(Math.random() * 5);
var src = './pic/' + num + '.jpg';
var dom = document.createElement('img');
dom.setAttribute('src', src);
imgBox.appendChild(dom);
}
bindEvent();
}
function bindEvent() {
var btn = document.getElementsByClassName('btn')[0];
img = document.getElementsByTagName('img');
var len = img.length;
btn.addEventListener('click', function () {
if (!flag) {
return;
}
flag = false;
var endNum = 0;
for (var i = 0; i < 20; i++) {
(function (i) {
setTimeout(function () {
monition(img[i], '1s', function () {
this.style.transform = 'scale(0)';
}, function () {
monition(this, '1s', function () {
this.style.transform = 'scale(1)';
this.style.opacity = 0;
}, function () {
endNum++;
if (endNum == len) {
show();
}
});
});
}, Math.random() * 1000);
})(i);
}
});
}
function show() {
var endAll = 0;
for (var i = 0; i < 20; i++) {
img[i].style.transition = '';
img[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() * 500 + 'px)';
(
function (i) {
setTimeout(function () {
monition(img[i], '2s', function () {
this.style.opacity = 1;
img[i].style.transform = 'rotateY(-360deg) translateZ(0px)';
}, function () {
endAll++;
if (endAll == 50) {
flag = true;
}
});
}, Math.random() * 1000);
})(i);
}
}
function monition(dom, time, doFun, cb) {
dom.style.transition = time;
doFun.call(dom);
var call = true;
dom.addEventListener('transitionend', function () {
if (call) {
cb && cb.call(dom);
call = false;
}
});
}