index.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
  6. <meta content='width=device-width, initial-scale=1.0,user-scalable=no' name='viewport'>
  7. <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
  8. <title>ELAB</title>
  9. <link href="css/reset.css" rel="stylesheet"></link>
  10. <link href="css/style.css?v=1.001" rel="stylesheet"></link>
  11. <link href="css/unslider.css" rel="stylesheet"></link>
  12. <link href="css/animate.min.css" rel="stylesheet"></link>
  13. <style type="text/css">
  14. .page {
  15. opacity: 0;
  16. }
  17. .top-menu {
  18. background: none;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <!--loading z-index:99999-->
  24. <div class="loading">
  25. <iframe frameborder="0" height="100%" scrolling="no" src="loading.html" width="100%"></iframe>
  26. </div>
  27. <div class="page" id="menuLayer">
  28. <!--top menu-->
  29. <div class="top-menu wow fadeInDown" data-wow-delay="1s" data-wow-duration="1s">
  30. <div class="logo">
  31. <a href="index.html"><img class="inner-icon"
  32. src="http://yun-image.elab-plus.com/images/index/1_objects@2x_2.png"/></a>
  33. </div>
  34. <div class="menu"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/index/1_objects@2x_3.png"/>
  35. </div>
  36. <div class="cases">
  37. <a href="javascript:showProjects();"><img class="inner-icon"
  38. src="http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png"/></a>
  39. </div>
  40. </div>
  41. <!--main menu-->
  42. <div class="main-menu" data-wow-delay="2s" data-wow-duration="1s">
  43. <!--contact us-->
  44. <div class="menu-background"></div>
  45. <div class="menu-contact">
  46. <div class="menu-contact-list">
  47. <div class="menu-contact-map">
  48. <a href="https://m.amap.com/search/mapview/markers=31.287272%2C121.447295%2C%E4%B8%8A%E6%B5%B7%E5%B8%82%E9%9D%99%E5%AE%89%E5%8C%BA%E5%BD%AD%E6%B1%9F%E8%B7%AF602%E5%8F%B7e%E5%BA%A7" target="_blank">
  49. <div class="map-icon">
  50. <img class="map-img" src="https://dm.static.elab-plus.com/elabGuanWang/Location@2x.png">
  51. </div>
  52. <div class="map-address">
  53. <p>地址</p>
  54. </div>
  55. <div class="map-desc">
  56. <p>上海市静安区彭江路602号E座408室</p>
  57. </div>
  58. </a>
  59. </div>
  60. <div class="menu-contact-phone">
  61. <div class="phone-icon">
  62. <img class="phone-img" src="https://dm.static.elab-plus.com/elabGuanWang/Phone@2x.png">
  63. </div>
  64. <div class="phone-address">
  65. <p>电话</p>
  66. </div>
  67. <div class="phone-desc">
  68. <p><a href="tel:02156519508">021-56519508</a></p>
  69. </div>
  70. </div>
  71. <div class="menu-contact-mail">
  72. <div class="email-icon">
  73. <img class="email-img" src="https://dm.static.elab-plus.com/elabGuanWang/Email@2x.png">
  74. </div>
  75. <div class="email-address">
  76. <p>邮件</p>
  77. </div>
  78. <div class="email-desc">
  79. <p><a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a></p>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. <!--CONTACT US-->
  85. <div class="menu-close"></div>
  86. <div id="water1"></div>
  87. <div id="water2"></div>
  88. <ul class="menu-list">
  89. <li class="elab_who">
  90. <a href="javascript:showWho();">ELAB是谁
  91. <small>WHO IS ELAB</small>
  92. </a>
  93. </li>
  94. <li class="elab_what">
  95. <a href="javascript:showDo();">ELAB在做什么
  96. <small>WHAT ELAB DO</small>
  97. </a>
  98. </li>
  99. <li class="elab_news">
  100. <a href="javascript:showNews();">新闻中心
  101. <small>NEWS</small>
  102. </a>
  103. </li>
  104. <li class="elab_project">
  105. <a href="javascript:showProjects();">作品案例
  106. <small>PROJECTS</small>
  107. </a>
  108. </li>
  109. <li class="elab_contact">
  110. <a href="javascript:showCareers();">加入我们
  111. <small>CAREERS</small>
  112. </a>
  113. </li>
  114. <!--<li>-->
  115. <!--<a href="javascript:showContact();">联系我们-->
  116. <!--<small>CONTACTS</small>-->
  117. <!--</a>-->
  118. <!--</li>-->
  119. </ul>
  120. </div>
  121. <!--main-->
  122. <div class="index-body wow fadeIn" data-wow-delay="0s" data-wow-duration="1s">
  123. <div class="slider">
  124. <ul></ul>
  125. <div class="slider-title wow fadeIn" data-wow-delay="4s" data-wow-duration="1s" id="slider-title">测试字体位置
  126. </div>
  127. <!--<div class="">-->
  128. <!--<a class="slider-links wow fadeIn" data-wow-delay="4s" data-wow-duration="1s" id="slider-links">了解详情</a>-->
  129. <!--</div>-->
  130. </div>
  131. <div class="small-slider">
  132. <img class="slider-img wow fadeIn" data-wow-delay="1s" data-wow-duration="2s"
  133. src="http://yun-image.elab-plus.com/images/index/1_objects@2x.png"/>
  134. <!--<div class="">-->
  135. <!--<a class="slider-links wow fadeIn" data-wow-delay="5.2s" data-wow-duration="1s"-->
  136. <!--href="javascript:showProjects();">了解详情</a>-->
  137. <!--</div>-->
  138. </div>
  139. </div>
  140. <div class="who-we-are wow fadeInUpIndex" data-wow-delay="3s" data-wow-duration="1s">
  141. <p>
  142. <a href="javascript:showWho();">我们是谁</a>
  143. </p>
  144. <div class="slide-line"></div>
  145. <div class="slide-line1"></div>
  146. </div>
  147. <div class="what-we-do wow fadeInUpIndex1" data-wow-delay="3s" data-wow-duration="1s">
  148. <p>
  149. <a href="javascript:showDo();">我们在做什么</a>
  150. </p>
  151. <div class="slide-line"></div>
  152. <div class="slide-line1"></div>
  153. </div>
  154. <div class="wave-bg" id="leftWave">
  155. <div class="wave-bg-inner1"></div>
  156. <div class="wave-bg-inner2"></div>
  157. </div>
  158. <div class="wave-bg" id="rightWave">
  159. <div class="wave-bg-inner1"></div>
  160. <div class="wave-bg-inner2"></div>
  161. </div>
  162. <!--footer-->
  163. <div class="footer wow fadeIn" data-wow-delay="3.2s" data-wow-duration="1s">
  164. <div class="mobile-hide left">Copyright©2015-2018, elab-plus.com. All rights reserved. | <a style="text-decoration:none;color:black" href="http://www.miitbeian.gov.cn"> 沪ICP备15047801号</a></div>
  165. <div class="mobile-hide right">上海定卓⽹络科技有限公司 电话:021-50753278 地址:上海市静安区彭江路602号E座408室</div>
  166. <div class="mobile-display left" style="visibility: hidden;">Copyright©2015-2018 | <a class="icpStyle" style="text-decoration:none;color:white" href="http://www.miitbeian.gov.cn"> 沪ICP备15047801号</a></div>
  167. </div>
  168. </div>
  169. <!--who we are-->
  170. <div class="whoWeAre pageLayer" hidden>
  171. <div class="black-mask"></div>
  172. <iframe frameborder="0" height="100%" name="frameWho" scrolling="yes" src="licheng.html?v=1.54325432545"
  173. width="100%"></iframe>
  174. </div>
  175. <!--/who we are-->
  176. <!--what we do-->
  177. <div class="whatWeDo pageLayer" hidden>
  178. <div class="black-mask"></div>
  179. <iframe frameborder="0" height="100%" name="frameDo" scrolling="yes" src="do.html" width="100%"></iframe>
  180. </div>
  181. <!--/what we do-->
  182. <!--contact us-->
  183. <div class="contactLayer pageLayer">
  184. <iframe frameborder="0" height="100%" name="frameContacts" scrolling="yes" src="contact.html" width="100%"></iframe>
  185. </div>
  186. <!--/contact us-->
  187. <!--news center-->
  188. <div class="newsLayer pageLayer" hidden>
  189. <iframe frameborder="0" name="frameNews" scrolling="yes" src="news.html" width="100%" height="100%"></iframe>
  190. </div>
  191. <!--/news center-->
  192. <!--what we do-->
  193. <div class="careersLayer pageLayer">
  194. <iframe frameborder="0" height="100%" name="frameCareers" scrolling="yes" src="careers.html" width="100%"></iframe>
  195. </div>
  196. <!--/what we do-->
  197. <!--project show-->
  198. <div class="projectsLayer pageLayer">
  199. <iframe frameborder="0" height="100%" name="frameProjects" scrolling="yes" src="projects.html?v=1.4324214"
  200. width="100%"></iframe>
  201. </div>
  202. <!--/project show-->
  203. <!--project list-->
  204. <div class="listLayer pageLayer">
  205. <iframe frameborder="0" height="100%" id="frameList" name="frameList" scrolling="yes" src="projects-1.html"
  206. width="100%"></iframe>
  207. </div>
  208. <!--/project list-->
  209. <!--project detail-->
  210. <div class="detailLayer pageLayer">
  211. <iframe frameborder="0" height="100%" id="frameDetail" name="frameDetail" scrolling="yes" src="projects-1-1.html"
  212. width="100%"></iframe>
  213. </div>
  214. <!--/project detail-->
  215. <!--project detail-->
  216. <div class="chuangLayer pageLayer">
  217. <iframe frameborder="0" height="100%" id="frameChuang" name="frameChuang" scrolling="yes"
  218. src="chuangshiren.html?v=1.0000" width="100%"></iframe>
  219. </div>
  220. <!--/project detail-->
  221. <script src="js/jquery-1.11.3.min.js"></script>
  222. <script src="js/unslider-min.js"></script>
  223. <script src="js/jquery.event.move.js"></script>
  224. <script src="js/jquery.event.swipe.js"></script>
  225. <script src="js/wow.js"></script>
  226. <script src="water/js/pixi.min.js"></script>
  227. <script src="water/js/TweenMax.min.js"></script>
  228. <script src="water/js/main.js"></script>
  229. <!--<script src="js/debug.js"></script>-->
  230. <script>
  231. //绑定前进后退事件
  232. var $_cpage = "index";
  233. // 隐藏地址栏
  234. // if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
  235. // bodyTag = document.getElementsByTagName('body')[0];
  236. // bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
  237. // }
  238. // window.onload=function(){
  239. // setTimeout(function() {
  240. // window.scrollTo(0, 1)
  241. // }, 0);
  242. // };
  243. //当前页面
  244. window.onpopstate = function (event) {
  245. var $_state = event.state;
  246. console.log("the state is: ");
  247. console.log($_state);
  248. if (!$_state) {
  249. return false;
  250. }
  251. var $_url = window.location.href;
  252. var $_mark = $_url.split("#")[1] || "";
  253. console.log($_mark);
  254. //if($_state.page == 'who' && $_cpage == 'chuang') { //创始人页回退直接显示who
  255. //} else {
  256. //先回退到首页,再执行显示某个页面
  257. showIndex();
  258. if ($_mark != "") {
  259. if ($_state.page == "who") {
  260. showWho();
  261. }
  262. if ($_state.page == "do") {
  263. showDo();
  264. }
  265. if ($_state.page == "projects" || $_state.page == "list") {
  266. showProjects();
  267. }
  268. if ($_state.page == "careers") {
  269. showCareers();
  270. }
  271. if ($_state.page == "contact") {
  272. showContact();
  273. }
  274. if ($_state.page == "news") {
  275. showNews();
  276. }
  277. }
  278. //}
  279. };
  280. /*slider*/
  281. $(function () {
  282. //存入首页的history数据
  283. history.pushState({
  284. page: 'index'
  285. }, "index", "index.html");
  286. //footer for mobile
  287. var $_w = $('html body').width();
  288. console.log("the w is:" + $_w);
  289. if ($_w <= 768) {
  290. $(".footer").removeClass("fadeIn").addClass("fadeInLeft");
  291. }
  292. //大图数据加载
  293. var percent, Count, Imgs;
  294. var ImgLoaded = 0;
  295. var spriteImagesSrc = [];
  296. var texts = [];
  297. var urls = [];
  298. var tmpImgs = [];
  299. var $_vw = $(window).width();
  300. // if($_vw >= 768) {
  301. $.get("http://106.14.225.13:8081/rest/listBanner", function (result) {
  302. var $_list = result.result.list;
  303. if ($_list.length > 0) { //有返回数据列表
  304. $(".slider ul").empty();
  305. var host = "";
  306. for (var i = 0; i < $_list.length; i++) { //生成unslide数据
  307. var img = $_list[i];
  308. spriteImagesSrc.push(host + img['image']);
  309. urls.push(img['url']);
  310. texts.push(img['name']);
  311. // var $_html = `<li>
  312. // <img class="slider-img animation" src="${host+img['image']}" />
  313. // <div class="slider-title">${img['name']}</div>
  314. // <div class="">
  315. // <a href="javascript:showSliderLink('${img['url']}');" class="slider-links wow fadeIn" data-wow-duration="1s" data-wow-delay="4s">浏览作品</a>
  316. // </div>
  317. // </li>`;
  318. // $(".slider ul").append($_html);
  319. }
  320. Count = $_list.length; //图片数量
  321. Imgs = new Map();
  322. for (var i = 0; i < $_list.length; i++) {
  323. Imgs.set(spriteImagesSrc[i], {width: 0, height: 0});
  324. }
  325. console.log(urls);
  326. let href = "javascript:showSliderLink('" + urls[0] + "');";
  327. $('#slider-links').attr('href', href);
  328. for (var i = 0; i < $_list.length; i++) {
  329. var tmp = i;
  330. var a = new Image();
  331. tmpImgs[tmp] = a;
  332. tmpImgs[tmp].src = spriteImagesSrc[tmp];
  333. tmpImgs[tmp].onload = onLoad(tmp);
  334. }
  335. // Imgs = new Array(Count);
  336. // for(var i = 0 ; i < Imgs.length ; i++){
  337. // Imgs[i] = new Image();
  338. // Imgs[i].src = spriteImagesSrc[i];
  339. // if(Imgs[i].complete){
  340. //  // 打印
  341. //  console.log('from:complete : width:'+img.width+',height:'+img.height);
  342. // ImgLoaded++;
  343. // }else{
  344. //  // 加载完成执行
  345. //  Imgs[i].onload = validateImages(i);
  346. // }
  347. // }
  348. // if(ImgLoaded == Count){
  349. // validateImages(0);
  350. // }
  351. //列表加载完毕,开始slider
  352. // var mySlider = $('.slider').unslider({
  353. // infinite: true,
  354. // nav: false,
  355. // arrows: false,
  356. // autoplay: true,
  357. // delay: 3000,
  358. // speed: 800
  359. // //index: s //初始化显示哪个礼品的索引
  360. // });
  361. }
  362. });
  363. function onLoad(i) {
  364. console.log("onLoad" + i);
  365. ImgLoaded++;
  366. console.log(tmpImgs[i].src + "|" + tmpImgs[i].width + tmpImgs[i].height);
  367. // Imgs.set(tmpImgs[i].src, {width :tmpImgs[i].width, height:tmpImgs[i].height});
  368. if (ImgLoaded == Count) {
  369. console.log("onLoad:"+JSON.stringify(Imgs));
  370. var initCanvasSlideshow = new CanvasSlideshow({
  371. sprites: spriteImagesSrc,
  372. displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
  373. autoPlay: true,
  374. autoPlaySpeed: [10, 3],
  375. displaceScale: [0, 0],
  376. stageWidth: $('.slider ul').width,
  377. stageHeight: $('.slider ul').height,
  378. x: $('.slider ul').x,
  379. y: $('.slider ul').y,
  380. screenWidth: $('.page')[0].clientWidth,
  381. screenHeight: $('.page')[0].clientHeight,
  382. centerSprites: true,
  383. wacky: false,
  384. displacementCenter: true,
  385. origImages: Imgs
  386. });
  387. var index = 0;
  388. $('#slider-title').text(texts[index]);
  389. setInterval(() => {
  390. var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
  391. initCanvasSlideshow.moveSlider(newIndex, function () {
  392. });
  393. index = newIndex;
  394. setTimeout(() => {
  395. $('#slider-title').text(texts[index]);
  396. let href = "javascript:showSliderLink('" + urls[index] + "');";
  397. $('#slider-links').attr('href', href);
  398. }, 1000);
  399. }, 8000);
  400. }
  401. }
  402. // }
  403. //验证是否成功加载完成,如不成功则重新加载
  404. // function validateImages(i) {
  405. // ImgLoaded++;
  406. // console.log(Imgs);
  407. // //console.log("the count is: " + Count);
  408. // if(ImgLoaded >= Count) {
  409. // //加载完毕,开始slider
  410. // // var mySlider = $('.slider').unslider({
  411. // // infinite: true,
  412. // // nav: false,
  413. // // arrows: false,
  414. // // autoplay: true,
  415. // // delay: 3000,
  416. // // speed: 800
  417. // // //index: s //初始化显示哪个礼品的索引
  418. // // });
  419. // var initCanvasSlideshow = new CanvasSlideshow({
  420. // sprites: spriteImagesSrc,
  421. // displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
  422. // autoPlay: true,
  423. // autoPlaySpeed: [10, 3],
  424. // displaceScale: [100, 70],
  425. // stageWidth : $('.slider ul').width,
  426. // stageHeight : $('.slider ul').height,
  427. // x : $('.slider ul').x,
  428. // y : $('.slider ul').y,
  429. // screenWidth : $('.page')[0].clientWidth,
  430. // screenHeight : $('.page')[0].clientHeight,
  431. // centerSprites : true,
  432. // wacky: false,
  433. // displacementCenter: true,
  434. // texts:texts,
  435. // origImages : Imgs
  436. // });
  437. // var index = 0;
  438. // setInterval(() => {
  439. // var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
  440. // initCanvasSlideshow.moveSlider(newIndex);
  441. // index = newIndex;
  442. // }, 8000);
  443. // }
  444. //
  445. // }
  446. });
  447. //resize
  448. window.onresize = function () {
  449. //window.location.reload();
  450. }
  451. /* end slider*/
  452. var markIdx = 0;
  453. var currentIdx = 0;
  454. var lastIdx = 0;
  455. $(function () {
  456. //show menu
  457. $("#menuLayer .menu").on("click", function (e) {
  458. $(".main-menu").addClass("active");
  459. });
  460. //close menu
  461. $('.menu-close').on('click', function (e) {
  462. $(".main-menu").removeClass("active");
  463. });
  464. //hover style
  465. $(".who-we-are").on('mouseover', function (e) {
  466. $(".footer .left,#leftWave").addClass("active");
  467. $(".who-we-are .slide-line,.who-we-are .slide-line1").addClass("active");
  468. });
  469. $(".who-we-are").on('mouseout', function (e) {
  470. $(".footer .left,#leftWave").removeClass("active");
  471. $(".who-we-are .slide-line,.who-we-are .slide-line1").removeClass("active").addClass("fadeInUp");
  472. });
  473. $(".what-we-do").on('mouseover', function (e) {
  474. $(".footer .right,#rightWave").addClass("active");
  475. $(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
  476. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
  477. });
  478. $(".what-we-do").on('mouseout', function (e) {
  479. //setTimeout(function(){
  480. $(".footer .right,#rightWave").removeClass("active");
  481. $(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
  482. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
  483. //},600);
  484. });
  485. $('#whatWeDo .menu').on('click', function (e) {
  486. $(".whatWeDo").fadeOut(500);
  487. e.stopPropagation();
  488. setTimeout(function () {
  489. $(".whatWeDo").removeClass("in");
  490. }, 500);
  491. });
  492. <!-- menu hover start-->
  493. $('.elab_who').hover(function () {
  494. currentIdx = 1;
  495. // $(".elab_who").css("opacity","1");
  496. // $(".elab_who").removeClass("animate_fadeIn");
  497. // $(".elab_what").removeClass("animate_fadeIn");
  498. // $(".elab_news").removeClass("animate_fadeIn");
  499. // $(".elab_project").removeClass("animate_fadeIn");
  500. // $(".elab_contact").removeClass("animate_fadeIn");
  501. //
  502. // $(".elab_what").addClass("animate_fadeOut");
  503. // $(".elab_news").addClass("animate_fadeOut");
  504. // $(".elab_project").addClass("animate_fadeOut");
  505. // $(".elab_contact").addClass("animate_fadeOut");
  506. },function () {
  507. currentIdx = 0;
  508. // $(".elab_who").css("opacity","1");
  509. //
  510. // $(".elab_who").removeClass("animate_fadeOut");
  511. // $(".elab_what").removeClass("animate_fadeOut");
  512. // $(".elab_news").removeClass("animate_fadeOut");
  513. // $(".elab_project").removeClass("animate_fadeOut");
  514. // $(".elab_contact").removeClass("animate_fadeOut");
  515. // $(".elab_what").addClass("animate_fadeIn");
  516. // $(".elab_news").addClass("animate_fadeIn");
  517. // $(".elab_project").addClass("animate_fadeIn");
  518. // $(".elab_contact").addClass("animate_fadeIn");
  519. });
  520. $('.elab_what').hover(function () {
  521. currentIdx = 2;
  522. // $(".elab_what").css("opacity","1");
  523. // $(".elab_who").removeClass("animate_fadeIn");
  524. // $(".elab_what").removeClass("animate_fadeIn");
  525. // $(".elab_news").removeClass("animate_fadeIn");
  526. // $(".elab_project").removeClass("animate_fadeIn");
  527. // $(".elab_contact").removeClass("animate_fadeIn");
  528. },function () {
  529. currentIdx = 0;
  530. /* $(".elab_what").css("opacity","1");
  531. $(".elab_who").removeClass("animate_fadeOut");
  532. $(".elab_what").removeClass("animate_fadeOut");
  533. $(".elab_news").removeClass("animate_fadeOut");
  534. $(".elab_project").removeClass("animate_fadeOut");
  535. $(".elab_contact").removeClass("animate_fadeOut");*/
  536. // $(".elab_who").addClass("animate_fadeIn");
  537. // $(".elab_news").addClass("animate_fadeIn");
  538. // $(".elab_project").addClass("animate_fadeIn");
  539. // $(".elab_contact").addClass("animate_fadeIn");
  540. });
  541. $('.elab_news').hover(function () {
  542. currentIdx = 3;
  543. /*$(".elab_news").css("opacity","1");
  544. $(".elab_who").removeClass("animate_fadeIn");
  545. $(".elab_what").removeClass("animate_fadeIn");
  546. $(".elab_news").removeClass("animate_fadeIn");
  547. $(".elab_project").removeClass("animate_fadeIn");
  548. $(".elab_contact").removeClass("animate_fadeIn");*/
  549. },function () {
  550. currentIdx = 0;
  551. /*$(".elab_news").css("opacity","1");
  552. $(".elab_who").removeClass("animate_fadeOut");
  553. $(".elab_what").removeClass("animate_fadeOut");
  554. $(".elab_news").removeClass("animate_fadeOut");
  555. $(".elab_project").removeClass("animate_fadeOut");
  556. $(".elab_contact").removeClass("animate_fadeOut");*/
  557. // $(".elab_who").addClass("animate_fadeIn");
  558. // $(".elab_what").addClass("animate_fadeIn");
  559. // $(".elab_project").addClass("animate_fadeIn");
  560. // $(".elab_contact").addClass("animate_fadeIn");
  561. });
  562. $('.elab_project').hover(function () {
  563. currentIdx = 4;
  564. /*$(".elab_project").css("opacity","1");
  565. $(".elab_who").removeClass("animate_fadeIn");
  566. $(".elab_what").removeClass("animate_fadeIn");
  567. $(".elab_news").removeClass("animate_fadeIn");
  568. $(".elab_project").removeClass("animate_fadeIn");
  569. $(".elab_contact").removeClass("animate_fadeIn");
  570. $(".elab_who").addClass("animate_fadeOut");
  571. $(".elab_what").addClass("animate_fadeOut");
  572. $(".elab_news").addClass("animate_fadeOut");
  573. $(".elab_contact").addClass("animate_fadeOut");*/
  574. },function () {
  575. currentIdx = 0;
  576. /*$(".elab_project").css("opacity","1");
  577. $(".elab_who").removeClass("animate_fadeOut");
  578. $(".elab_what").removeClass("animate_fadeOut");
  579. $(".elab_news").removeClass("animate_fadeOut");
  580. $(".elab_project").removeClass("animate_fadeOut");
  581. $(".elab_contact").removeClass("animate_fadeOut");
  582. $(".elab_who").addClass("animate_fadeIn");
  583. $(".elab_what").addClass("animate_fadeIn");
  584. $(".elab_news").addClass("animate_fadeIn");
  585. $(".elab_contact").addClass("animate_fadeIn");*/
  586. });
  587. $('.elab_contact').hover(function () {
  588. currentIdx = 5;
  589. /*$(".elab_contact").css("opacity","1");
  590. $(".elab_who").removeClass("animate_fadeIn");
  591. $(".elab_what").removeClass("animate_fadeIn");
  592. $(".elab_news").removeClass("animate_fadeIn");
  593. $(".elab_project").removeClass("animate_fadeIn");
  594. $(".elab_contact").removeClass("animate_fadeIn");
  595. $(".elab_who").addClass("animate_fadeOut");
  596. $(".elab_what").addClass("animate_fadeOut");
  597. $(".elab_news").addClass("animate_fadeOut");
  598. $(".elab_project").addClass("animate_fadeOut");*/
  599. },function () {
  600. currentIdx = 0;
  601. /* $(".elab_contact").css("opacity","1");
  602. $(".elab_who").removeClass("animate_fadeOut");
  603. $(".elab_what").removeClass("animate_fadeOut");
  604. $(".elab_news").removeClass("animate_fadeOut");
  605. $(".elab_project").removeClass("animate_fadeOut");
  606. $(".elab_contact").removeClass("animate_fadeOut");
  607. $(".elab_who").addClass("animate_fadeIn");
  608. $(".elab_what").addClass("animate_fadeIn");
  609. $(".elab_news").addClass("animate_fadeIn");
  610. $(".elab_project").addClass("animate_fadeIn");*/
  611. });
  612. <!-- menu hover end -->
  613. <!--mouse over listener start-->
  614. <!--mouse over listener end-->
  615. setInterval(function () {
  616. if(markIdx !== currentIdx){
  617. markIdx = currentIdx;
  618. var link = '';
  619. var empty = true;
  620. switch (markIdx) {
  621. case 0:
  622. link = '';
  623. empty = true;
  624. break;
  625. case 1:
  626. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
  627. empty = false;
  628. break;
  629. case 2:
  630. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
  631. empty = false;
  632. break;
  633. case 3:
  634. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
  635. empty = false;
  636. break;
  637. case 4:
  638. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
  639. empty = false;
  640. break;
  641. case 5:
  642. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
  643. empty = false;
  644. break;
  645. }
  646. if(empty){
  647. $(".menu-background").fadeOut(400,function () {
  648. $(".menu-background").css('background-image',link);
  649. });
  650. }else {
  651. if(lastIdx!==0){
  652. $(".menu-background").fadeOut(400,function () {
  653. $(".menu-background").css('background-image',link);
  654. $(".menu-background").fadeIn(800);
  655. })
  656. }else {
  657. $(".menu-background").css('background-image',link);
  658. $(".menu-background").fadeIn(800);
  659. }
  660. }
  661. lastIdx = markIdx;
  662. }
  663. },1210);
  664. });
  665. /*window.onload = function() {
  666. var $_w = $('html body').width();
  667. console.log("the w is:" + $_w);
  668. if($_w <= 768) {
  669. $(".footer").removeClass("fadeIn").addClass("fadeInLeft");
  670. }
  671. }*/
  672. var checkLoad = setInterval(function () {
  673. // localStorage.setItem("loadComplete","0");
  674. if(localStorage.getItem("loadComplete") === "1"){
  675. hideLoading();
  676. clearInterval(checkLoad);
  677. }
  678. },800);
  679. //loading completed
  680. function hideLoading() {
  681. //console.log("here");
  682. $(".loading").fadeOut(1000);
  683. $(".page").css("opacity", "1");
  684. //start wow
  685. var wow = new WOW({
  686. boxClass: 'wow',
  687. animateClass: 'animated',
  688. offset: 0,
  689. mobile: true,
  690. live: true
  691. });
  692. wow.init();
  693. }
  694. /****页面操作区*****/
  695. //返回首页统一处理函数
  696. function showIndex() {
  697. $(".pageLayer").each(function (i) {
  698. var $_class = $(this).attr("class");
  699. //console.log($_class);
  700. if ($_class.indexOf("whoWeAre") > -1 || $_class.indexOf("whatWeDo") > -1 || $_class.indexOf("listLayer") > -1 || $_class.indexOf("detailLayer") > -1) {
  701. $(this).removeClass("in");
  702. } else {
  703. $(this).fadeOut();
  704. }
  705. });
  706. $(".whoWeAre").hide();
  707. $(".whatWeDo").hide();
  708. }
  709. //show who
  710. function showWho() {
  711. $(".whoWeAre").show();
  712. $(".whoWeAre").addClass("in");
  713. frameWho.window.startWow();
  714. $(".main-menu").removeClass("active");
  715. //存入history数据,并设置当前页面
  716. history.pushState({
  717. page: 'who'
  718. }, "who we are", "#who");
  719. $_cpage = "who";
  720. }
  721. //close who we are
  722. function closeWho() {
  723. $(".whoWeAre").removeClass("in");
  724. }
  725. //show do
  726. function showDo(istrue) {
  727. $(".whatWeDo").show();
  728. $(".whatWeDo").addClass("in");
  729. frameDo.window.startWow();
  730. $(".main-menu").removeClass("active");
  731. //存入history数据,并设置当前页面
  732. history.pushState({
  733. page: 'do'
  734. }, "what we do", "#do");
  735. $_cpage = "do";
  736. }
  737. //close what we do
  738. function closeDo() {
  739. $(".whatWeDo").removeClass("in");
  740. }
  741. //show contacts
  742. function showContact() {
  743. $(".contactLayer").fadeIn(500);
  744. frameContacts.window.startWow();
  745. $(".main-menu").removeClass("active");
  746. //存入history数据,并设置当前页面
  747. history.pushState({
  748. page: 'contact'
  749. }, "contact", "#contact");
  750. $_cpage = "contact";
  751. }
  752. //close contacts
  753. function closeContact() {
  754. $(".contactLayer").fadeOut(1000);
  755. }
  756. //show contacts
  757. function showNews() {
  758. $(".newsLayer").fadeIn(500);
  759. frameNews.window.startWow();
  760. $(".main-menu").removeClass("active");
  761. //存入history数据,并设置当前页面
  762. history.pushState({
  763. page: 'news'
  764. }, "news", "#news");
  765. $_cpage = "news";
  766. }
  767. //close contacts
  768. function closeNews() {
  769. $(".newsLayer").fadeOut(1000);
  770. }
  771. //show contacts
  772. function showCareers() {
  773. $(".careersLayer").fadeIn(500);
  774. frameCareers.window.startWow();
  775. $(".main-menu").removeClass("active");
  776. //存入history数据,并设置当前页面
  777. history.pushState({
  778. page: 'careers'
  779. }, "careers", "#careers");
  780. $_cpage = "careers";
  781. }
  782. //close contacts
  783. function closeCareers() {
  784. $(".careersLayer").fadeOut(1000);
  785. }
  786. //show Projects
  787. function showProjects() {
  788. $(".projectsLayer").fadeIn(500);
  789. frameProjects.window.startWow();
  790. $(".main-menu").removeClass("active");
  791. //存入history数据,并设置当前页面
  792. history.pushState({
  793. page: 'projects'
  794. }, "projects", "#projects");
  795. $_cpage = "projects";
  796. }
  797. //close contacts
  798. function closeProjects() {
  799. $(".projectsLayer").fadeOut(1000);
  800. }
  801. //close sub layer and show projects
  802. function closeAndShowPro(str) {
  803. console.log(str);
  804. $("." + str + "").fadeOut(1000);
  805. setTimeout(function () {
  806. showProjects();
  807. }, 500);
  808. }
  809. //close sub layer and show careers
  810. function closeAndShowCareers() {
  811. $(".whoWeAre").fadeOut(1000);
  812. setTimeout(function () {
  813. $(".whoWeAre").removeClass("in");
  814. showCareers();
  815. }, 500);
  816. }
  817. //show list-1
  818. function showList(id) {
  819. $('#frameList').attr("src", "projects-1.html?parent=" + id + "");
  820. $(".listLayer").addClass("in");
  821. //frameList.window.startWow();
  822. $(".main-menu").removeClass("active");
  823. //存入history数据,并设置当前页面
  824. history.pushState({
  825. page: 'list'
  826. }, "listLayer", "#list");
  827. $_cpage = "list";
  828. }
  829. //close list
  830. function closeList() {
  831. $(".listLayer").removeClass("in");
  832. }
  833. //show list-1
  834. function showDetail(src) {
  835. if (!src || src == "" || src == "#") {
  836. return false;
  837. }
  838. $('#frameDetail').attr("src", "." + src + "");
  839. $(".detailLayer").addClass("in");
  840. $(".main-menu").removeClass("active");
  841. //存入history数据,并设置当前页面
  842. history.pushState({
  843. page: 'detail'
  844. }, "detailLayer", "#detail");
  845. $_cpage = "detail";
  846. }
  847. //close list
  848. function closeDetail() {
  849. $(".detailLayer").removeClass("in");
  850. }
  851. //showSliderLink
  852. function showSliderLink(url) {
  853. if (!url || url == "" || url == "#") {
  854. return false;
  855. }
  856. $('#frameDetail').attr("src", "./" + url + "");
  857. $(".detailLayer").addClass("in");
  858. $(".main-menu").removeClass("active");
  859. //存入history数据,并设置当前页面
  860. history.pushState({
  861. page: 'detail'
  862. }, "detailLayer", "#detail");
  863. $_cpage = "detail";
  864. }
  865. //show do
  866. function showChuang() {
  867. $(".chuangLayer").addClass("in");
  868. frameChuang.window.startWow();
  869. $(".main-menu").removeClass("active");
  870. //存入history数据,并设置当前页面
  871. history.pushState({
  872. page: 'chuang'
  873. }, "chuang shiren ", "#chuang");
  874. $_cpage = "chuang";
  875. }
  876. //close what we do
  877. function closeChuang() {
  878. $(".chuangLayer").removeClass("in");
  879. }
  880. </script>
  881. </body>
  882. </html>