css实现照片墙点击合成大图效果代码-html代码-BFW代码库

css实现照片墙点击合成大图效果代码

代码语言：html

代码描述：css实现照片墙点击合成大图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相册</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0
}

body {
	background-color: #e8e3da;
}

ul {
	list-style: none
}

#wrap {
	width: 980px;
	height: 500px;
}

#wrap li {
	position: absolute;
	left: 0;
	top: 0;
	transition: transform 1500ms ease-out;
	background-color: white;
}

.box {
	width: 100%;
	height: 100%;
	background-size: cover;
	transition: transform 1500ms ease-out;
}

.center {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
	var collums = 5;//列
	var rows = 5;//行
	var wrap = $('#wrap');
	var w = wrap.width() / rows;
	var h = wrap.height() / collums;


	for (var r = 0; r < rows; r++) {
		for (var c = 0; c < collums; c++) {

			$('<li><div class="box"></div></li>').width(w).height(h)
					.css({
						'left': w * c + 'px',
						'top': h * r + 'px',
						'transform': 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg) ' +
						'translateX(' + (30*c-60) + 'px)' +
						'translateY(' + (30*r-60) + 'px)'
					})
					.find('.box')
					.css({
						'background-image': 'url(//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png)',
						'transform': 'scale(0.9)'
					})
					.end()
					.appendTo(wrap)
		}
	}

	var change = true;
	wrap.find('li').on('click', function () {
		if (.........完整代码请登录后点击上方下载按钮下载查看