原生js实现3D图片小案例

最新推荐文章于 2021-11-10 13:12:55 发布

ZzTiAmo

最新推荐文章于 2021-11-10 13:12:55 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/ZzTiAmo/article/details/102981487

版权

<!DOCTYPE html>
  <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"  content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body{
background: pink;
}
.wrapper .content{
width: 500px;
height: 250px;
background: lightgray;
margin: 70px auto;
}
.wrapper .btn{
margin-left: 610px;
margin-top: 10px;
width: 100px;
height: 50px;
font-size: 40px;
border-radius: 2px;
background: lightblue;
color: #000;
cursor: pointer;
border: none;
box-shadow: 2px 2px 2px 2px gray;
}
img{
width: 50px;
height: 50px;
float: left;
}
  </style> 
<title>3D实现图片</title>
</head>
<body>
<div class="wrapper">
	<div class="content">
	</div>
	<button class="btn">click</button>
</div>
<script > 
function init(){
addImg();
}
init();
var flag = true;
 var len,img;
function addImg(){
for (var i = 0; i < 50; i++) {
	var imgBox = document.getElementsByClassName('content')[0];
	var num = Math.floor(Math.random()*10);
	var src = "./lijian/" + num + ".jpg";
	var dom = document.createElement('img');
	dom.setAttribute('src',src);
	imgBox.appendChild(dom);
}
bindEvent();
}
function bindEvent(){
img = document.getElementsByTagName('img');
 len = img.length;
 var btn = document.getElementsByClassName('btn')[0];
btn.addEventListener('click',function(){
	if (!flag) {
		return;
	}
	var endNum = 0;
	flag = false;
	for (var i = 0; i < len; 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 allEnd = 0;
for (var i = 0; i < len; 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;
				this.style.transform = 'rotateY(-360deg) translateZ(0)';
			},function(){
				allEnd ++;
				if (allEnd == len) {
					flag = true;
				}
			})
		},Math.random()*1000);
	})(i)
}
}
function monition(dom,time,doFun,cb){
dom.style.transition = time;
doFun.call(dom);
var called = true； 
dom.addEventListener('transitionend',function(){
	if (called) {
		cb&&cb.call(dom);
		called = false;
 	}
});
}
   </script>
 </body>