给你的青春做个毕业册，用技术定格最美好的回忆-Toy模板网

这篇具有很好参考价值的文章主要介绍了给你的青春做个毕业册，用技术定格最美好的回忆。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🎈 毕业纪念册

山水有来路，早晚复相逢，毕业总是充满了离别和感恩。
不要因离别而伤感，告别才能再见。无论暂别或就别，朋友终会再相见。
青春总是充满了不舍和留念，那我们就将生活记录成册，待再次相逢，让我们看照片再忆青春吧。
当然技术人的毕业有技术人纪念的方式，让我们手写一个毕业纪念册，去纪念那些可爱的人。
即使他们不能长留在我们脑海中，那就让他们永远定格在内存里。
源码下载地址：精品源码 / 炫酷特效 / 毕业纪念册

给你的青春做个毕业册，用技术定格最美好的回忆

🎈 创建画布

我们在做这种 3D 的相册时候
首先我们需要考虑到使用 3D 功能，另外，既然 3D 就一定有景深
搭建3D效果必须的两个属性：一个变换风格变 3D，一个场景景深

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>毕业纪念册</title>
	<style type='text/css'>
		/* 景深 */
		#perspective {
			perspective: 800px;
		}

		#wrap {
			width: 120px;
			height: 180px;
			margin: 0 auto;
			position: relative;

			/*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
			transform-style: preserve-3d;
			transform: rotateX(-10deg) rotateY(0deg);
		}
	</style>
</head>

<body>
	<div id="perspective">
		<div id='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" />
			<img src="img/8.jpg" />
			<img src="img/9.jpg" />
			<img src="img/10.jpg" />
			<img src="img/11.jpg" />
			<p></p>
		</div>
	</div>
</body>

</html>

🎈 图片围圈

我们可以看到这 11 张图片围成了一个大圆圈
其实只要将每个图片设置不同的摆放角度即可实现围成圆圈的效果

var oWrap = document.getElementById('wrap');
var oImg = oWrap.getElementsByTagName('img');
var oImgLength = oImg.length;
var Deg = 360 / oImgLength;

// 设置每张图片的角度
for (var i = 0; i < oImgLength; i++) {
	oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
	oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';
}

🎈 图片添加倒影

为了给图片更加突出的效果，我们给图片都添加上倒影效果
我们可以通过 -webkit-box-reflect 样式给图片添加倒影效果，可以设置倒影的朝向、偏移、遮盖、线性渐变等属性

#wrap img {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 1px;

	transform: rotateY(0deg) translateZ(0px);
	/*倒影：朝向 偏移 遮盖*/
	/*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
	-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
}

🎈 居中展示

我们需要使得相册在浏览器的正中间展示
不然相册的观感会很不理想，使用鼠标操作时很容易被跑出屏幕之外
根据当前屏幕的可显示高度，自定义给相册设置上边距

mTop();

window.onresize = mTop;

function mTop() {
	var wH = document.documentElement.clientHeight;
	oWrap.style.marginTop = wH / 2 - 180 + 'px';
}

🎈 鼠标事件

我们在使用这个相册时候，可以想到有三个事件：鼠标点击时、鼠标移动时、鼠标松开时
其实也只有这三个事件，只要写好这三个事件的逻辑，这个毕业纪念册其实也就完成了
在鼠标点击时候，我们需要记录鼠标最开始的位置，当鼠标移动结束松开时，要记录鼠标结束时候的位置
其实逻辑就是，将这两个鼠标坐标进行求差，然后中间给一些过度的动画，当这个差值减小到某个值时，就清除动画的定时器，即可实现流畅的动画滚动效果

// 鼠标按下时
document.onmousedown = function (ev) {
	ev = ev || window.event;

	//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
	lastX = ev.clientX;
	lastY = ev.clientY;

	// 鼠标移动时
	this.onmousemove = function (ev) {
		ev = ev || window.event;

		clearInterval(timer);

		nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
		nowY = ev.clientY; // clientY ………………………………顶部………………

		//当前坐标和前一点坐标差值
		minusX = nowX - lastX;
		minusY = nowY - lastY;

		//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
		roY += minusX * 0.2; // roY = roY + minusX*0.2;
		roX -= minusY * 0.1;

		oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

		//前一点的坐标
		lastX = nowX;
		lastY = nowY;

	}
	// 鼠标松开时
	this.onmouseup = function () {
		this.onmousemove = null;
		timer = setInterval(function () {
			minusX *= 0.95;
			minusY *= 0.95;
			roY += minusX * 0.2; // roY = roY + minusX*0.2;
			roX -= minusY * 0.1;
			oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
		
			// 差值减少到某个值，清除动画
			if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
				clearInterval(timer);
			}
			console.log(minusX);
		}, 13);
	}
	return false;
}