js实现三维立体照片墙点击放大效果代码-html代码-BFW代码库

js实现三维立体照片墙点击放大效果代码

代码语言：html

代码描述：js实现三维立体照片墙点击放大效果代码

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

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


<style type="text/css">

	html {

		overflow: hidden;

	}

	body {

		position: absolute;

		margin: 0px;

		padding: 0px;

		background: #eee;

		width: 100%;

		height: 100%;

		color: #fff;

		font-family: arial;

		font-size: 0.8em;

	}

	#screen {

		position: absolute;

		width: 100%;

		height: 100%;

		background: #000;

		overflow: hidden;

	}

	#screen img, canvas { 

		position: absolute;

		left: -9999px;

		cursor: pointer;

        image-rendering: optimizeSpeed;



	}

	#screen .href {

		border: #FFF dotted 1px;

	}

	#screen .fog { 

		position: absolute;

		background: #fff;

		opacity: 0.1;

		filter: alpha(opacity=10);

	}

	#command {

		position:absolute;

		left: 1em;

		top: 1em;

		width: 130px;

		z-index: 30000;

		background:#000;

		border: #000 solid 1em;

	}

	#bar {

		position:relative;

		left: 1em;

		top: 1em;

		height: 160px;

	}

	#bar .button { 

		position: absolute;

		background: #222;

		width: 20px;

		height: 20px;

		cursor: pointer;

	}

	#bar .loaded { 

		background: #666;

	}

	#bar .viewed { 

		background: #fff;

	}

	#bar .selected { 

		background: #f00;

	}

	#urlInfo {

		position: absolute;

		background: url(data:image/gif;base64,R0lGODlhCQAJAIAAAP8AAP///yH5BAAAAP8ALAAAAAAJAAkAAAIMhI+poRbc3oKJtpsKADs=) no-repeat 0 4px;

		visibility: hidden;

		z-index: 30000;

		padding-left: 12px;

		cursor: pointer;

	}

</style>



<script type="text/javascript">



var m3D = function () {

	/* ---- private vars ---- */

	var diapo = [],

		imb,

		scr,

		bar,

		selected,

		urlInfo,

		imagesPath = "images/",

		camera = {x:0, y:0, z:-650, s:0, fov: 500},

		nw = 0,

		nh = 0;

	/* ==== camera tween methods ==== */

	camera.setTarget = function (c0, t1, p) {

		if (Math.abs(t1 - c0) > .1) {

			camera.s = 1;

			camera.p = 0;

			camera.d = t1 - c0;

			if (p) {

				camera.d *= 2;

				camera.p = 9;

			}

		}

	}

	camera.tween = function (v) {

		if (camera.s != 0) {

			camera.p += camera.s;

			camera[v] += camera.d * camera.p * .01;

.........完整代码请登录后点击上方下载按钮下载查看