打造3D立体相册

项目目录结构：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link type="text/css" rel="styleSheet"  href="css/wrap.css" />
		
	</head>
	<body onload="setInterval('go()',5000)">
		
		<audio  autoplay="autoplay"  loop="loop" hidden="hidden" >
				<source src="media/最美的期待.mp3" type="audio/mpeg" />
		</audio>
		
		<div class="wrap">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
			<img src="img/6.jpg" />
			<img src="img/7.jpg" />
		</div>
		
		<script>
			var oimg = document.getElementsByTagName('img')
			var iNow = 0;
			var iTarget = 0;
			//给七张图片排位置           07 06 01 02 03 04 05
			tab(0)
			function tab(n){
				for(var i = 0; i < 3; i++){
					
					var left = n-1-i
					if(left<0){
						left = left+7;
					}
					oimg[left].style.transform = `translateX(${-150*(i+1)}px) translateZ(${200-i*100}px) rotateY(30deg)`
					
					var right = n+1+i
					if(right>6){
						right = right-7;
					}
					oimg[right].style.transform = `translateX(${150*(i+1)}px) translateZ(${200-i*100}px) rotateY(-30deg)`
					
				}
				
				oimg[n].style.transform = `translateZ(${250}px)`
				
			}
			var middle = 0;
			var num = 0;
			//给每张图片添加点击事件
			for(var i = 0; i < oimg.length; i++){
				oimg[i].index = i;
				oimg[i].onclick = function(ev){
					//中线的位置
					middle = document.documentElement.clientWidth/2;
					//获取鼠标到达屏幕左边的水平距离
					num = ev.clientX;
					iTarget = this.index;
 					if(middle<num) //鼠标在右边
					{
 						goNext()
 					}else{
 						goPrev()
 					}
				}
			}
			
			function go(){
				iTarget = parseInt(10*Math.random())
				goNext()
			}
			
			function goNext(){
				if(iTarget == iNow)
				{
					return; 
				}
				iNow++
				if(iNow>6){
					iNow = 0;
				}
				tab(iNow)
				//设置延时 递归调用
				setTimeout(function(){
					goNext()
				},800)
			}
			
			function goPrev(){
				if(iTarget == iNow)
				{
					return; 
				}
				iNow--
				console.log(iNow)
				if(iNow<0){
					iNow = 6;
				}
				tab(iNow)
				//设置延时 递归调用
				setTimeout(function(){
					goPrev()
				},800)
			}	
		</script>
	</body>
</html>

css样式代码：

html,body{  
	height: 100%;  
	width: 100%;
	margin: 0;
	}  
.wrap{
	height: 100%;
	width: 100%;
	margin:0 ; 
	padding: 0;
	background: url(../img/snow.png) no-repeat;
	background-size: 100%;
	background-attachment: fixed;
	position: relative;
	/**
	 * 定义一个3d空间
	 */
	transform-style: preserve-3d;
	perspective: 800px;
}
.wrap img{
	width: 200px;
	height: 320px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -130px;
	margin-top: -150px;
	transition: 1s;
}

小结：对于前端，只能抱着玩玩的态度，不想深入研究...太伤脑子了，啊哈哈哈哈。觉得css这块学的还是不是很好，还是需要继续努力学习啊。

猜你喜欢