3d-tv是一款三维图片墙相册墙插件-BFW插件库

3d-tv是一款三维图片墙相册墙插件

一款三维图片墙相册墙插件，可点击单个图片实现突出放大三维效果。

使用方式：

第一步引入3d-tv.js

第二步配置参数

onresize = tv.resize;
tv.init();

完整示例代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		position: absolute;
		margin: 0px;
		padding: 0px;
		background: #4f5a70;
		width: 100%;
		height: 100%;
	}
	a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
	a:hover,a:focus{color:#74777b;text-decoration: none;}
	#screen {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #3e495d;
	}
	#screen img {
		position: absolute;
		cursor: pointer;
		visibility: hidden;
		width: 0px;
		height: 0px;
	}
	#screen .tvover {
		border: solid #876;
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#screen .tvout {
		border: solid #fff;
		opacity: 0.7;
	}
	#bankImages {
		display: none;
	}
</style>

</head>
<body>

<div id="screen">

</div>
<div id="bankImages">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5fc1a7bc2bc81.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653b1fc8bc9.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5fc1a7bc2bc81.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653b1fc8bc9.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png">
	<img alt="" src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png">
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/3d-tv.js"></script>
<script type="text/javascript">
	/* ==== start script ==== */
	onresize = tv.resize;
	tv.init();
</script>

</body>
</html>

3d-tv是一款三维图片墙相册墙插件

网友评论0

three.js

photo-sphere-viewer.min.js

ar.js

scenejs.js

3d-tv.js