【H5】DIV分割与拼接（动画拼接）

最新推荐文章于 2022-03-08 10:29:22 发布

joneeky

最新推荐文章于 2022-03-08 10:29:22 发布

阅读量2.1k

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/joneeky/article/details/52225790

版权

网页前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现原理：定义容器DIV，此DIV中可包含任何内容。然后用这个DIV可克隆4个DIV，插入到父容器中，并隐藏被克隆DIV。这个时候，4个DIV其实是和容器DIV一模一样的，每一个DIV负责显示容器DIV的一部分，便完成了DIV的拼接。

需要显示DIV的某一部分，要用到 webkit 的私有 CSS 属性 clip-path，此属性功能很多，但现在只需要用到它的 polygon 函数，该函数根据顶点坐标（可用百分比）连接成路径，可得到一个多边形。

我们现在是把一个大的DIV分成了4个小的DIV，每个小DIV都是一个矩形，所以只需要给 polygon 函数4个顶点参数即可：

第一个：-webkit-clip-path: polygon(0px 0px, 50% 0px, 50% 50%, 0px 50%);

第二个：-webkit-clip-path: polygon(50% 0px, 100% 0px, 100% 50%, 50% 50%);

第三个：-webkit-clip-path: polygon(0px 50%, 50% 50%, 50% 100%, 0px 100%);

第四个：-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);

这样就得到了4个负责显示不同区域的DIV，需要注意的是，虽然每个DIV只显示出原来的1/4，但DIV实际大小不会变。

DIV切割已经完成了，还需要给它们一个拼接动画，可以用 JS 实现动画，但还是用CSS实现比较方便一点。

@keyframes t0 {
	from {
		top: -50%;
		left: -50%;
	}
	to {
		top: 0%;
		left: 0%;
	}
}
@keyframes t1 {
	from {
		top: -50%;
		right: -50%;
	}
	to {
		top: 0%;
		right: 0%;
	}
}
@keyframes t2 {
	from {
		bottom: -50%;
		left: -50%;
	}
	to {
		bottom: 0%;
		left: 0%;
	}
}
@keyframes t3 {
	from {
		bottom: -50%;
		right: -50%;
	}
	to {
		bottom: 0%;
		right: 0%;
	}
}

css的 animation 属性实现动画效果，我们让动画500毫秒完成，并由快到慢：

animation: t0 .5s ease-out;

animation: t1 .5s ease-out;

animation: t2 .5s ease-out;

animation: t3 .5s ease-out;

全部都完成后，你可能会发现完成拼接之后是这样的：

明显有拼接的痕迹，这怎么行呢？可以说出现这种情况的概率是50%，必须要解决才行。

这是因为我们在切割DIV时用的是百分比，当屏幕（窗口）像素为奇数时就会出现这样的问题，其实解决方法是多样的，选择一个最简单而且最好的吧。

就是完成拼接后将这4个DIV移除，显示出原来隐藏的容易DIV即可，此方法还解决的DOM元素冗余的问题，实在不能再好。

因为动画完成需要500毫秒，等 document 加载完成后500毫秒讲它们移除：

setTimeout(function() {
for (var i = 0; i < 4; i++) {
document.getElementById("t_" + i).remove();
document.getElementById("t").style.display = "block";
}
}, 500);

完整代码（未重构，搞清楚逻辑即可）：

<!doctype html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
@keyframes t0 {
	from {
		top: -50%;
		left: -50%;
	}
	to {
		top: 0%;
		left: 0%;
	}
}
@keyframes t1 {
	from {
		top: -50%;
		right: -50%;
	}
	to {
		top: 0%;
		right: 0%;
	}
}
@keyframes t2 {
	from {
		bottom: -50%;
		left: -50%;
	}
	to {
		bottom: 0%;
		left: 0%;
	}
}
@keyframes t3 {
	from {
		bottom: -50%;
		right: -50%;
	}
	to {
		bottom: 0%;
		right: 0%;
	}
}
html, body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
#t {
	display: none;
	
}
.t {
	background-image: url(./1.jpg);
	background-size: cover;
	width: 100%;
	height: 100%;
}
#t_0 {
	animation: t0 .5s ease-out;
	-webkit-clip-path: polygon(0px 0px, 50% 0px, 50% 50%, 0px 50%);
/*	background-color: #F00;*/
}
#t_1 {
	animation: t1 .5s ease-out;
	-webkit-clip-path: polygon(50% 0px, 100% 0px, 100% 50%, 50% 50%);
/*	background-color: #0F0;*/
}
#t_2 {
	animation: t2 .5s ease-out;
	-webkit-clip-path: polygon(0px 50%, 50% 50%, 50% 100%, 0px 100%);
/*	background-color: #00F;*/
}
#t_3 {
	animation: t3 .5s ease-out;
	-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
	/*background-color: #FF0;*/
}
</style>
<title>无标题文档</title>
</head>

<body>
<div id="t" class="t">
</div>
<script>
function boxClip() {
	for (var i = 0; i < 4; i++) {
		var box = document.getElementById("t").cloneNode(true);
		box.setAttribute("id", "t_" + i);
		box.style.position = "absolute";
		document.getElementsByTagName("body")[0].appendChild(box);
	}
}
window.onload = function() {
	boxClip();
	setTimeout(function() {
		for (var i = 0; i < 4; i++) {
			document.getElementById("t_" + i).remove();
			document.getElementById("t").style.display = "block";
		}
	}, 500);
}
</script>
</body>
</html>