zhangs
/
elab


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671
							<!DOCTYPE html>
<html lang='en'>

	<head>
		<meta charset="UTF-8">
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'>
		<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
		<title>ELAB</title>
		<link rel="stylesheet" href="css/reset.css"></link>
		<link rel="stylesheet" href="css/style.css?v=1.001"></link>
		<link rel="stylesheet" href="css/unslider.css"></link>
		<link rel="stylesheet" href="css/animate.min.css"></link>
		<style type="text/css">
			.page {
				opacity: 0;
			}

			.top-menu {
				background: none;
			}
		</style>
	</head>

	<body>
		<!--loading z-index:99999-->
		<div class="loading">
			<iframe src="loading.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
		</div>

		<div id="menuLayer" class="page">

			<!--top menu-->
			<div class="top-menu wow fadeInDown" data-wow-duration="1s" data-wow-delay="1s">
				<div class="logo">
					<a href="index.html"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/index/1_objects@2x_2.png" /></a>
				</div>
				<div class="menu"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/index/1_objects@2x_3.png" /></div>
				<div class="cases">
					<a href="javascript:showProjects();"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png" /></a>
				</div>
			</div>

			<!--main menu-->
			<div class="main-menu" data-wow-duration="1s" data-wow-delay="2s">
				<div class="menu-close"></div>
				<div id="water1"></div>
				<div id="water2"></div>
				<ul class="menu-list">
					<li>
						<a href="javascript:showWho();">我们是谁<small>WHO WE ARE</small></a>
					</li>
					<li>
						<a href="javascript:showDo();">我们在做什么<small>WHAT WE DO</small></a>
					</li>
					<li>
						<a href="javascript:showProjects();">作品案例<small>PROJECTS</small></a>
					</li>
					<li>
						<a href="javascript:showCareers();">加入我们<small>CAREERS</small></a>
					</li>
					<li>
						<a href="javascript:showContact();">联系我们<small>CONTACTS</small></a>
					</li>
				</ul>
			</div>

			<!--main-->
			<div class="index-body wow fadeIn" data-wow-duration="1s" data-wow-delay="0s">
				<div class="slider">
					<ul></ul>
					<div id="slider-title" class="slider-title wow fadeIn" data-wow-duration="1s" data-wow-delay="4s">测试字体位置</div>
					<div class="link-box">
					 	<a id="slider-links" class="slider-links wow fadeIn" data-wow-duration="1s" data-wow-delay="4s">了解详情</a>
					</div>
				</div>
				<div class="small-slider">
					<img class="slider-img wow fadeIn" data-wow-duration="2s" data-wow-delay="1s" src="http://yun-image.elab-plus.com/images/index/1_objects@2x.png" />
					<div class="link-box">
						<a href="javascript:showProjects();" class="slider-links wow fadeIn" data-wow-duration="1s" data-wow-delay="5.2s">了解详情</a>
					</div>
				</div>
			</div>

			<div class="who-we-are wow fadeInUpIndex" data-wow-duration="1s" data-wow-delay="3s">
				<p>
					<a href="javascript:showWho();">我们是谁</a>
				</p>
				<div class="slide-line"></div>
				<div class="slide-line1"></div>
			</div>
			<div class="what-we-do wow fadeInUpIndex1" data-wow-duration="1s" data-wow-delay="3s">
				<p>
					<a href="javascript:showDo();">我们在做什么</a>
				</p>
				<div class="slide-line"></div>
				<div class="slide-line1"></div>
			</div>

			<div id="leftWave" class="wave-bg">
				<div class="wave-bg-inner1"></div>
				<div class="wave-bg-inner2"></div>
			</div>
			<div id="rightWave" class="wave-bg">
				<div class="wave-bg-inner1"></div>
				<div class="wave-bg-inner2"></div>
			</div>

			<!--footer-->
			<div class="footer wow fadeIn" data-wow-duration="1s" data-wow-delay="3.2s">
				<div class="mobile-hide left">Copyright©2015-2018, elab-plus.com. All rights reserved. | 沪ICP备15047801号-1</div>
				<div class="mobile-hide right">上海定卓⽹络科技有限公司 电话：021-50753278 地址：上海市静安区彭江路602号E座408室</div>
				<div class="mobile-display left" style="visibility: hidden;">Copyright©2015-2018 | 沪ICP备15047801号-1</div>

			</div>

		</div>

		<!--who we are-->
		<div class="whoWeAre pageLayer" hidden>
			<div class="black-mask"></div>
			<iframe name="frameWho" src="licheng.html?v=1.54325432545" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/who we are-->

		<!--what we do-->
		<div class="whatWeDo pageLayer" hidden>
			<div class="black-mask"></div>
			<iframe name="frameDo" src="do.html" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/what we do-->

		<!--what we do-->
		<div class="contactLayer pageLayer">
			<iframe name="frameContacts" src="contact.html" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/what we do-->

		<!--what we do-->
		<div class="careersLayer pageLayer">
			<iframe name="frameCareers" src="careers.html" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/what we do-->

		<!--what we do-->
		<div class="projectsLayer pageLayer">
			<iframe name="frameProjects" src="projects.html?v=1.4324214" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/what we do-->

		<!--project list-->
		<div class="listLayer pageLayer">
			<iframe name="frameList" id="frameList" src="projects-1.html" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/project list-->

		<!--project detail-->
		<div class="detailLayer pageLayer">
			<iframe name="frameDetail" id="frameDetail" src="projects-1-1.html" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/project detail-->

		<!--project detail-->
		<div class="chuangLayer pageLayer">
			<iframe name="frameChuang" id="frameChuang" src="chuangshiren.html?v=1.0000" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
		</div>
		<!--/project detail-->

		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/unslider-min.js"></script>
		<script src="js/jquery.event.move.js"></script>
		<script src="js/jquery.event.swipe.js"></script>
		<script src="js/wow.js"></script>
		<script src="water/js/pixi.min.js"></script>
		<script src="water/js/TweenMax.min.js"></script>
		<script src="water/js/main.js"></script>
		<!--<script src="js/debug.js"></script>-->

		<script>
			//绑定前进后退事件
			var $_cpage = "index";
			// 隐藏地址栏
			//            if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
			//                bodyTag = document.getElementsByTagName('body')[0];
			//                bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
			//            }
			//            window.onload=function(){
			//                setTimeout(function() {
			//                    window.scrollTo(0, 1)
			//                }, 0);
			//            };

			//当前页面
			window.onpopstate = function(event) {
				var $_state = event.state;
				console.log("the state is: ");
				console.log($_state);
				if(!$_state) {
					return false;
				}
				var $_url = window.location.href;
				var $_mark = $_url.split("#")[1] || "";
				console.log($_mark);

				//if($_state.page == 'who' && $_cpage == 'chuang') { //创始人页回退直接显示who

				//} else {
					//先回退到首页,再执行显示某个页面
					showIndex();

					if($_mark != "") {
						if($_state.page == "who") {
							showWho();
						}
						if($_state.page == "do") {
							showDo();
						}
						if($_state.page == "projects" || $_state.page == "list") {
							showProjects();
						}
						if($_state.page == "careers") {
							showCareers();
						}
						if($_state.page == "contact") {
							showContact();
						}
					}
				//}

			};

			/*slider*/
			$(function() {

				//存入首页的history数据
				history.pushState({
					page: 'index'
				}, "index", "index.html");

				//footer for mobile
				var $_w = $('html body').width();
				console.log("the w is:" + $_w);
				if($_w <= 768) {
					$(".footer").removeClass("fadeIn").addClass("fadeInLeft");
				}

				//大图数据加载
				var percent, Count, Imgs;
				var ImgLoaded = 0;
				var spriteImagesSrc = [];
				var texts = [];
				var urls = [];
				var tmpImgs = [];
				var $_vw = $(window).width();
//				if($_vw >= 768) {
					$.get("http://106.14.225.13:8081/rest/listBanner", function(result) {

						var $_list = result.result.list;
						if($_list.length > 0) { //有返回数据列表
							$(".slider ul").empty();
							var host = "";

							for(var i = 0; i < $_list.length; i++) { //生成unslide数据
								var img = $_list[i];
								spriteImagesSrc.push(host + img['image']);
								urls.push(img['url']);
								texts.push(img['name']);
							// 	var $_html = `<li>
							// <img class="slider-img animation" src="${host+img['image']}" />
							// <div class="slider-title">${img['name']}</div>
							// <div class="link-box">
							// 	<a href="javascript:showSliderLink('${img['url']}');" class="slider-links wow fadeIn" data-wow-duration="1s" data-wow-delay="4s">浏览作品</a>
							// </div>
						  //   </li>`;
							// 	$(".slider ul").append($_html);
							}
							Count = $_list.length; //图片数量
							Imgs = new Map();
							for(var i = 0; i < $_list.length; i++){
								Imgs.set(spriteImagesSrc[i], {width : 0, height:0});
							}
							console.log(urls);
							let href = "javascript:showSliderLink('" + urls[0] + "');";
							$('#slider-links').attr('href', href);
							for(var i = 0; i < $_list.length; i++){
								var tmp = i;
								var a = new Image();
								tmpImgs[tmp] = a;
								tmpImgs[tmp].src = spriteImagesSrc[tmp];
								tmpImgs[tmp].onload = onLoad(tmp);
							}

							// Imgs = new Array(Count);
							// for(var i = 0 ; i < Imgs.length ; i++){
							// 	Imgs[i] = new Image();
							// 	Imgs[i].src = spriteImagesSrc[i];
							// 	if(Imgs[i].complete){
							// 	 // 打印
							// 	 console.log('from:complete : width:'+img.width+',height:'+img.height);
							// 		ImgLoaded++;
							// 	}else{
							// 	 // 加载完成执行
							// 	 Imgs[i].onload = validateImages(i);
							// 	}
							// }
							// if(ImgLoaded == Count){
							// 	validateImages(0);
							// }
							//列表加载完毕，开始slider
							// var mySlider = $('.slider').unslider({
							// 	infinite: true,
							// 	nav: false,
							// 	arrows: false,
							// 	autoplay: true,
							// 	delay: 3000,
							// 	speed: 800
							// 	//index: s //初始化显示哪个礼品的索引
							// });


						}
					});
					function onLoad(i){
						console.log("onLoad" + i);
						ImgLoaded++;
						console.log(tmpImgs[i].src + "|" + tmpImgs[i].width + tmpImgs[i].height);
						// Imgs.set(tmpImgs[i].src, {width :tmpImgs[i].width, height:tmpImgs[i].height});
						if(ImgLoaded == Count){
							console.log(Imgs);
							var initCanvasSlideshow = new CanvasSlideshow({
								sprites: spriteImagesSrc,
								displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
								autoPlay: true,
								autoPlaySpeed: [10, 3],
								displaceScale: [0, 0],
								stageWidth : $('.slider ul').width,
								stageHeight : $('.slider ul').height,
								x : $('.slider ul').x,
								y : $('.slider ul').y,
								screenWidth : $('.page')[0].clientWidth,
								screenHeight : $('.page')[0].clientHeight,
								centerSprites : true,
								wacky: false,
								displacementCenter: true,
								origImages : Imgs
							});
							var index = 0;
							$('#slider-title').text(texts[index]);
							setInterval(() => {
								var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
								initCanvasSlideshow.moveSlider(newIndex , function(){});
								index = newIndex;
								setTimeout(() => {
									$('#slider-title').text(texts[index]);
									let href = "javascript:showSliderLink('" + urls[index] + "');";
									$('#slider-links').attr('href', href);
								},1000);
							}, 8000);
						}
					}
//				}
				//验证是否成功加载完成，如不成功则重新加载
				// function validateImages(i) {
				// 		ImgLoaded++;
				// 		console.log(Imgs);
				// 		//console.log("the count is: " + Count);
				// 		if(ImgLoaded >= Count) {
				// 			//加载完毕，开始slider
				// 			// var mySlider = $('.slider').unslider({
				// 			// 	infinite: true,
				// 			// 	nav: false,
				// 			// 	arrows: false,
				// 			// 	autoplay: true,
				// 			// 	delay: 3000,
				// 			// 	speed: 800
				// 			// 	//index: s //初始化显示哪个礼品的索引
				// 			// });
				// 			var initCanvasSlideshow = new CanvasSlideshow({
				// 				sprites: spriteImagesSrc,
				// 				displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
				// 				autoPlay: true,
				// 				autoPlaySpeed: [10, 3],
				// 				displaceScale: [100, 70],
				// 				stageWidth : $('.slider ul').width,
				// 				stageHeight : $('.slider ul').height,
				// 				x : $('.slider ul').x,
				// 				y : $('.slider ul').y,
				// 				screenWidth : $('.page')[0].clientWidth,
				// 				screenHeight : $('.page')[0].clientHeight,
				// 				centerSprites : true,
				// 				wacky: false,
				// 				displacementCenter: true,
				// 				texts:texts,
				// 				origImages : Imgs
				// 			});
				// 			var index = 0;
				// 			setInterval(() => {
				// 				var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
				// 				initCanvasSlideshow.moveSlider(newIndex);
				// 				index = newIndex;
				// 			}, 8000);
				// 		}
				//
				// }

			});
			//resize
			window.onresize = function() {
				//window.location.reload();
			}
			/* end slider*/

			$(function() {

				//show menu
				$("#menuLayer .menu").on("click", function(e) {
					$(".main-menu").addClass("active");
				});
				//close menu
				$('.menu-close').on('click', function(e) {
					$(".main-menu").removeClass("active");
				});

				//hover style
				$(".who-we-are").on('mouseover', function(e) {
					$(".footer .left,#leftWave").addClass("active");
					$(".who-we-are .slide-line,.who-we-are .slide-line1").addClass("active");
				});
				$(".who-we-are").on('mouseout', function(e) {
					$(".footer .left,#leftWave").removeClass("active");
					$(".who-we-are .slide-line,.who-we-are .slide-line1").removeClass("active").addClass("fadeInUp");

				});

				$(".what-we-do").on('mouseover', function(e) {
					$(".footer .right,#rightWave").addClass("active");
					$(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
					$("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
				});
				$(".what-we-do").on('mouseout', function(e) {
					//setTimeout(function(){
					$(".footer .right,#rightWave").removeClass("active");
					$(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
					$("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
					//},600);
				});

				$('#whatWeDo .menu').on('click', function(e) {
					$(".whatWeDo").fadeOut(500);
					e.stopPropagation();
					setTimeout(function() {
						$(".whatWeDo").removeClass("in");
					}, 500);
				});

			});

			/*window.onload = function() {
				var $_w = $('html body').width();
				console.log("the w is:" + $_w);
				if($_w <= 768) {
					$(".footer").removeClass("fadeIn").addClass("fadeInLeft");
				}
			}*/

			//loading completed
			function hideLoading() {
				//console.log("here");
				$(".loading").fadeOut(1000);
				$(".page").css("opacity", "1");
				//start wow
				var wow = new WOW({
					boxClass: 'wow',
					animateClass: 'animated',
					offset: 0,
					mobile: true,
					live: true
				});
				wow.init();
			}


			/****页面操作区*****/
			//返回首页统一处理函数
			function showIndex() {
				$(".pageLayer").each(function(i) {
					var $_class = $(this).attr("class");
					//console.log($_class);
					if($_class.indexOf("whoWeAre") > -1 || $_class.indexOf("whatWeDo") > -1 || $_class.indexOf("listLayer") > -1 || $_class.indexOf("detailLayer") > -1) {
						$(this).removeClass("in");
					} else {
						$(this).fadeOut();
					}
				});
				$(".whoWeAre").hide();
				$(".whatWeDo").hide();
			}
			//show who
			function showWho() {
				$(".whoWeAre").show();
				$(".whoWeAre").addClass("in");
				frameWho.window.startWow();
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'who'
				}, "who we are", "#who");
				$_cpage = "who";
			}
			//close who we are
			function closeWho() {
				$(".whoWeAre").removeClass("in");
			}

			//show do
			function showDo(istrue) {
				$(".whatWeDo").show();
				$(".whatWeDo").addClass("in");
				frameDo.window.startWow();
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'do'
				}, "what we do", "#do");
				$_cpage = "do";
			}
			//close what we do
			function closeDo() {
				$(".whatWeDo").removeClass("in");
			}

			//show contacts
			function showContact() {
				$(".contactLayer").fadeIn(500);
				frameContacts.window.startWow();
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'contact'
				}, "contact", "#contact");
				$_cpage = "contact";
			}
			//close contacts
			function closeContact() {
				$(".contactLayer").fadeOut(1000);
			}

			//show contacts
			function showCareers() {
				$(".careersLayer").fadeIn(500);
				frameCareers.window.startWow();
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'careers'
				}, "careers", "#careers");
				$_cpage = "careers";
			}
			//close contacts
			function closeCareers() {
				$(".careersLayer").fadeOut(1000);
			}

			//show Projects
			function showProjects() {
				$(".projectsLayer").fadeIn(500);
				frameProjects.window.startWow();
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'projects'
				}, "projects", "#projects");
				$_cpage = "projects";
			}
			//close contacts
			function closeProjects() {
				$(".projectsLayer").fadeOut(1000);
			}
			//close sub layer and show projects
			function closeAndShowPro(str) {
				console.log(str);
				$("." + str + "").fadeOut(1000);
				setTimeout(function() {
					showProjects();
				}, 500);
			}
			//close sub layer and show careers
			function closeAndShowCareers() {
				$(".whoWeAre").fadeOut(1000);
				setTimeout(function() {
					$(".whoWeAre").removeClass("in");
					showCareers();
				}, 500);
			}

			//show list-1
			function showList(id) {

				$('#frameList').attr("src", "projects-1.html?parent=" + id + "");
				$(".listLayer").addClass("in");
				//frameList.window.startWow();
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'list'
				}, "listLayer", "#list");
				$_cpage = "list";
			}
			//close list
			function closeList() {
				$(".listLayer").removeClass("in");
			}

			//show list-1
			function showDetail(src) {
				if(!src || src == "" || src == "#") {
					return false;
				}
				$('#frameDetail').attr("src", "." + src + "");
				$(".detailLayer").addClass("in");
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'detail'
				}, "detailLayer", "#detail");
				$_cpage = "detail";

			}
			//close list
			function closeDetail() {
				$(".detailLayer").removeClass("in");
			}

			//showSliderLink
			function showSliderLink(url) {

				if(!url || url == "" || url == "#") {
					return false;
				}

				$('#frameDetail').attr("src", "./" + url + "");
				$(".detailLayer").addClass("in");
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'detail'
				}, "detailLayer", "#detail");
				$_cpage = "detail";
			}

			//show do
			function showChuang() {
				$(".chuangLayer").addClass("in");
				frameChuang.window.startWow();
				$(".main-menu").removeClass("active");
				//存入history数据，并设置当前页面
				history.pushState({
					page: 'chuang'
				}, "chuang shiren ", "#chuang");
				$_cpage = "chuang";
			}
			//close what we do
			function closeChuang() {
				$(".chuangLayer").removeClass("in");
			}
		</script>

	</body>

</html>