index.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974
  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. | 沪ICP备15047801号-1</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 | 沪ICP备15047801号-1</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. debugger
  371. var initCanvasSlideshow = new CanvasSlideshow({
  372. sprites: spriteImagesSrc,
  373. displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
  374. autoPlay: true,
  375. autoPlaySpeed: [10, 3],
  376. displaceScale: [0, 0],
  377. stageWidth: $('.slider ul').width,
  378. stageHeight: $('.slider ul').height,
  379. x: $('.slider ul').x,
  380. y: $('.slider ul').y,
  381. screenWidth: $('.page')[0].clientWidth,
  382. screenHeight: $('.page')[0].clientHeight,
  383. centerSprites: true,
  384. wacky: false,
  385. displacementCenter: true,
  386. origImages: Imgs
  387. });
  388. var index = 0;
  389. $('#slider-title').text(texts[index]);
  390. setInterval(() => {
  391. var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
  392. initCanvasSlideshow.moveSlider(newIndex, function () {
  393. });
  394. index = newIndex;
  395. setTimeout(() => {
  396. $('#slider-title').text(texts[index]);
  397. let href = "javascript:showSliderLink('" + urls[index] + "');";
  398. $('#slider-links').attr('href', href);
  399. }, 1000);
  400. }, 8000);
  401. }
  402. }
  403. // }
  404. //验证是否成功加载完成,如不成功则重新加载
  405. // function validateImages(i) {
  406. // ImgLoaded++;
  407. // console.log(Imgs);
  408. // //console.log("the count is: " + Count);
  409. // if(ImgLoaded >= Count) {
  410. // //加载完毕,开始slider
  411. // // var mySlider = $('.slider').unslider({
  412. // // infinite: true,
  413. // // nav: false,
  414. // // arrows: false,
  415. // // autoplay: true,
  416. // // delay: 3000,
  417. // // speed: 800
  418. // // //index: s //初始化显示哪个礼品的索引
  419. // // });
  420. // var initCanvasSlideshow = new CanvasSlideshow({
  421. // sprites: spriteImagesSrc,
  422. // displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
  423. // autoPlay: true,
  424. // autoPlaySpeed: [10, 3],
  425. // displaceScale: [100, 70],
  426. // stageWidth : $('.slider ul').width,
  427. // stageHeight : $('.slider ul').height,
  428. // x : $('.slider ul').x,
  429. // y : $('.slider ul').y,
  430. // screenWidth : $('.page')[0].clientWidth,
  431. // screenHeight : $('.page')[0].clientHeight,
  432. // centerSprites : true,
  433. // wacky: false,
  434. // displacementCenter: true,
  435. // texts:texts,
  436. // origImages : Imgs
  437. // });
  438. // var index = 0;
  439. // setInterval(() => {
  440. // var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
  441. // initCanvasSlideshow.moveSlider(newIndex);
  442. // index = newIndex;
  443. // }, 8000);
  444. // }
  445. //
  446. // }
  447. });
  448. //resize
  449. window.onresize = function () {
  450. //window.location.reload();
  451. }
  452. /* end slider*/
  453. var markIdx = 0;
  454. var currentIdx = 0;
  455. var lastIdx = 0;
  456. $(function () {
  457. //show menu
  458. $("#menuLayer .menu").on("click", function (e) {
  459. $(".main-menu").addClass("active");
  460. });
  461. //close menu
  462. $('.menu-close').on('click', function (e) {
  463. $(".main-menu").removeClass("active");
  464. });
  465. //hover style
  466. $(".who-we-are").on('mouseover', function (e) {
  467. $(".footer .left,#leftWave").addClass("active");
  468. $(".who-we-are .slide-line,.who-we-are .slide-line1").addClass("active");
  469. });
  470. $(".who-we-are").on('mouseout', function (e) {
  471. $(".footer .left,#leftWave").removeClass("active");
  472. $(".who-we-are .slide-line,.who-we-are .slide-line1").removeClass("active").addClass("fadeInUp");
  473. });
  474. $(".what-we-do").on('mouseover', function (e) {
  475. $(".footer .right,#rightWave").addClass("active");
  476. $(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
  477. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
  478. });
  479. $(".what-we-do").on('mouseout', function (e) {
  480. //setTimeout(function(){
  481. $(".footer .right,#rightWave").removeClass("active");
  482. $(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
  483. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
  484. //},600);
  485. });
  486. $('#whatWeDo .menu').on('click', function (e) {
  487. $(".whatWeDo").fadeOut(500);
  488. e.stopPropagation();
  489. setTimeout(function () {
  490. $(".whatWeDo").removeClass("in");
  491. }, 500);
  492. });
  493. <!-- menu hover start-->
  494. $('.elab_who').hover(function () {
  495. currentIdx = 1;
  496. // $(".elab_who").css("opacity","1");
  497. // $(".elab_who").removeClass("animate_fadeIn");
  498. // $(".elab_what").removeClass("animate_fadeIn");
  499. // $(".elab_news").removeClass("animate_fadeIn");
  500. // $(".elab_project").removeClass("animate_fadeIn");
  501. // $(".elab_contact").removeClass("animate_fadeIn");
  502. //
  503. // $(".elab_what").addClass("animate_fadeOut");
  504. // $(".elab_news").addClass("animate_fadeOut");
  505. // $(".elab_project").addClass("animate_fadeOut");
  506. // $(".elab_contact").addClass("animate_fadeOut");
  507. },function () {
  508. currentIdx = 0;
  509. // $(".elab_who").css("opacity","1");
  510. //
  511. // $(".elab_who").removeClass("animate_fadeOut");
  512. // $(".elab_what").removeClass("animate_fadeOut");
  513. // $(".elab_news").removeClass("animate_fadeOut");
  514. // $(".elab_project").removeClass("animate_fadeOut");
  515. // $(".elab_contact").removeClass("animate_fadeOut");
  516. // $(".elab_what").addClass("animate_fadeIn");
  517. // $(".elab_news").addClass("animate_fadeIn");
  518. // $(".elab_project").addClass("animate_fadeIn");
  519. // $(".elab_contact").addClass("animate_fadeIn");
  520. });
  521. $('.elab_what').hover(function () {
  522. currentIdx = 2;
  523. // $(".elab_what").css("opacity","1");
  524. // $(".elab_who").removeClass("animate_fadeIn");
  525. // $(".elab_what").removeClass("animate_fadeIn");
  526. // $(".elab_news").removeClass("animate_fadeIn");
  527. // $(".elab_project").removeClass("animate_fadeIn");
  528. // $(".elab_contact").removeClass("animate_fadeIn");
  529. },function () {
  530. currentIdx = 0;
  531. /* $(".elab_what").css("opacity","1");
  532. $(".elab_who").removeClass("animate_fadeOut");
  533. $(".elab_what").removeClass("animate_fadeOut");
  534. $(".elab_news").removeClass("animate_fadeOut");
  535. $(".elab_project").removeClass("animate_fadeOut");
  536. $(".elab_contact").removeClass("animate_fadeOut");*/
  537. // $(".elab_who").addClass("animate_fadeIn");
  538. // $(".elab_news").addClass("animate_fadeIn");
  539. // $(".elab_project").addClass("animate_fadeIn");
  540. // $(".elab_contact").addClass("animate_fadeIn");
  541. });
  542. $('.elab_news').hover(function () {
  543. currentIdx = 3;
  544. /*$(".elab_news").css("opacity","1");
  545. $(".elab_who").removeClass("animate_fadeIn");
  546. $(".elab_what").removeClass("animate_fadeIn");
  547. $(".elab_news").removeClass("animate_fadeIn");
  548. $(".elab_project").removeClass("animate_fadeIn");
  549. $(".elab_contact").removeClass("animate_fadeIn");*/
  550. },function () {
  551. currentIdx = 0;
  552. /*$(".elab_news").css("opacity","1");
  553. $(".elab_who").removeClass("animate_fadeOut");
  554. $(".elab_what").removeClass("animate_fadeOut");
  555. $(".elab_news").removeClass("animate_fadeOut");
  556. $(".elab_project").removeClass("animate_fadeOut");
  557. $(".elab_contact").removeClass("animate_fadeOut");*/
  558. // $(".elab_who").addClass("animate_fadeIn");
  559. // $(".elab_what").addClass("animate_fadeIn");
  560. // $(".elab_project").addClass("animate_fadeIn");
  561. // $(".elab_contact").addClass("animate_fadeIn");
  562. });
  563. $('.elab_project').hover(function () {
  564. currentIdx = 4;
  565. /*$(".elab_project").css("opacity","1");
  566. $(".elab_who").removeClass("animate_fadeIn");
  567. $(".elab_what").removeClass("animate_fadeIn");
  568. $(".elab_news").removeClass("animate_fadeIn");
  569. $(".elab_project").removeClass("animate_fadeIn");
  570. $(".elab_contact").removeClass("animate_fadeIn");
  571. $(".elab_who").addClass("animate_fadeOut");
  572. $(".elab_what").addClass("animate_fadeOut");
  573. $(".elab_news").addClass("animate_fadeOut");
  574. $(".elab_contact").addClass("animate_fadeOut");*/
  575. },function () {
  576. currentIdx = 0;
  577. /*$(".elab_project").css("opacity","1");
  578. $(".elab_who").removeClass("animate_fadeOut");
  579. $(".elab_what").removeClass("animate_fadeOut");
  580. $(".elab_news").removeClass("animate_fadeOut");
  581. $(".elab_project").removeClass("animate_fadeOut");
  582. $(".elab_contact").removeClass("animate_fadeOut");
  583. $(".elab_who").addClass("animate_fadeIn");
  584. $(".elab_what").addClass("animate_fadeIn");
  585. $(".elab_news").addClass("animate_fadeIn");
  586. $(".elab_contact").addClass("animate_fadeIn");*/
  587. });
  588. $('.elab_contact').hover(function () {
  589. currentIdx = 5;
  590. /*$(".elab_contact").css("opacity","1");
  591. $(".elab_who").removeClass("animate_fadeIn");
  592. $(".elab_what").removeClass("animate_fadeIn");
  593. $(".elab_news").removeClass("animate_fadeIn");
  594. $(".elab_project").removeClass("animate_fadeIn");
  595. $(".elab_contact").removeClass("animate_fadeIn");
  596. $(".elab_who").addClass("animate_fadeOut");
  597. $(".elab_what").addClass("animate_fadeOut");
  598. $(".elab_news").addClass("animate_fadeOut");
  599. $(".elab_project").addClass("animate_fadeOut");*/
  600. },function () {
  601. currentIdx = 0;
  602. /* $(".elab_contact").css("opacity","1");
  603. $(".elab_who").removeClass("animate_fadeOut");
  604. $(".elab_what").removeClass("animate_fadeOut");
  605. $(".elab_news").removeClass("animate_fadeOut");
  606. $(".elab_project").removeClass("animate_fadeOut");
  607. $(".elab_contact").removeClass("animate_fadeOut");
  608. $(".elab_who").addClass("animate_fadeIn");
  609. $(".elab_what").addClass("animate_fadeIn");
  610. $(".elab_news").addClass("animate_fadeIn");
  611. $(".elab_project").addClass("animate_fadeIn");*/
  612. });
  613. <!-- menu hover end -->
  614. <!--mouse over listener start-->
  615. <!--mouse over listener end-->
  616. setInterval(function () {
  617. if(markIdx !== currentIdx){
  618. markIdx = currentIdx;
  619. var link = '';
  620. var empty = true;
  621. switch (markIdx) {
  622. case 0:
  623. link = '';
  624. empty = true;
  625. break;
  626. case 1:
  627. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
  628. empty = false;
  629. break;
  630. case 2:
  631. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
  632. empty = false;
  633. break;
  634. case 3:
  635. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
  636. empty = false;
  637. break;
  638. case 4:
  639. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
  640. empty = false;
  641. break;
  642. case 5:
  643. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
  644. empty = false;
  645. break;
  646. }
  647. if(empty){
  648. $(".menu-background").fadeOut(400,function () {
  649. $(".menu-background").css('background-image',link);
  650. });
  651. }else {
  652. if(lastIdx!==0){
  653. $(".menu-background").fadeOut(400,function () {
  654. $(".menu-background").css('background-image',link);
  655. $(".menu-background").fadeIn(800);
  656. })
  657. }else {
  658. $(".menu-background").css('background-image',link);
  659. $(".menu-background").fadeIn(800);
  660. }
  661. }
  662. lastIdx = markIdx;
  663. }
  664. },1210);
  665. });
  666. /*window.onload = function() {
  667. var $_w = $('html body').width();
  668. console.log("the w is:" + $_w);
  669. if($_w <= 768) {
  670. $(".footer").removeClass("fadeIn").addClass("fadeInLeft");
  671. }
  672. }*/
  673. var checkLoad = setInterval(function () {
  674. // localStorage.setItem("loadComplete","0");
  675. if(localStorage.getItem("loadComplete") === "1"){
  676. hideLoading();
  677. clearInterval(checkLoad);
  678. }
  679. },800);
  680. //loading completed
  681. function hideLoading() {
  682. //console.log("here");
  683. $(".loading").fadeOut(1000);
  684. $(".page").css("opacity", "1");
  685. //start wow
  686. var wow = new WOW({
  687. boxClass: 'wow',
  688. animateClass: 'animated',
  689. offset: 0,
  690. mobile: true,
  691. live: true
  692. });
  693. wow.init();
  694. }
  695. /****页面操作区*****/
  696. //返回首页统一处理函数
  697. function showIndex() {
  698. $(".pageLayer").each(function (i) {
  699. var $_class = $(this).attr("class");
  700. //console.log($_class);
  701. if ($_class.indexOf("whoWeAre") > -1 || $_class.indexOf("whatWeDo") > -1 || $_class.indexOf("listLayer") > -1 || $_class.indexOf("detailLayer") > -1) {
  702. $(this).removeClass("in");
  703. } else {
  704. $(this).fadeOut();
  705. }
  706. });
  707. $(".whoWeAre").hide();
  708. $(".whatWeDo").hide();
  709. }
  710. //show who
  711. function showWho() {
  712. $(".whoWeAre").show();
  713. $(".whoWeAre").addClass("in");
  714. frameWho.window.startWow();
  715. $(".main-menu").removeClass("active");
  716. //存入history数据,并设置当前页面
  717. history.pushState({
  718. page: 'who'
  719. }, "who we are", "#who");
  720. $_cpage = "who";
  721. }
  722. //close who we are
  723. function closeWho() {
  724. $(".whoWeAre").removeClass("in");
  725. }
  726. //show do
  727. function showDo(istrue) {
  728. $(".whatWeDo").show();
  729. $(".whatWeDo").addClass("in");
  730. frameDo.window.startWow();
  731. $(".main-menu").removeClass("active");
  732. //存入history数据,并设置当前页面
  733. history.pushState({
  734. page: 'do'
  735. }, "what we do", "#do");
  736. $_cpage = "do";
  737. }
  738. //close what we do
  739. function closeDo() {
  740. $(".whatWeDo").removeClass("in");
  741. }
  742. //show contacts
  743. function showContact() {
  744. $(".contactLayer").fadeIn(500);
  745. frameContacts.window.startWow();
  746. $(".main-menu").removeClass("active");
  747. //存入history数据,并设置当前页面
  748. history.pushState({
  749. page: 'contact'
  750. }, "contact", "#contact");
  751. $_cpage = "contact";
  752. }
  753. //close contacts
  754. function closeContact() {
  755. $(".contactLayer").fadeOut(1000);
  756. }
  757. //show contacts
  758. function showNews() {
  759. $(".newsLayer").fadeIn(500);
  760. frameNews.window.startWow();
  761. $(".main-menu").removeClass("active");
  762. //存入history数据,并设置当前页面
  763. history.pushState({
  764. page: 'news'
  765. }, "news", "#news");
  766. $_cpage = "news";
  767. }
  768. //close contacts
  769. function closeNews() {
  770. $(".newsLayer").fadeOut(1000);
  771. }
  772. //show contacts
  773. function showCareers() {
  774. $(".careersLayer").fadeIn(500);
  775. frameCareers.window.startWow();
  776. $(".main-menu").removeClass("active");
  777. //存入history数据,并设置当前页面
  778. history.pushState({
  779. page: 'careers'
  780. }, "careers", "#careers");
  781. $_cpage = "careers";
  782. }
  783. //close contacts
  784. function closeCareers() {
  785. $(".careersLayer").fadeOut(1000);
  786. }
  787. //show Projects
  788. function showProjects() {
  789. $(".projectsLayer").fadeIn(500);
  790. frameProjects.window.startWow();
  791. $(".main-menu").removeClass("active");
  792. //存入history数据,并设置当前页面
  793. history.pushState({
  794. page: 'projects'
  795. }, "projects", "#projects");
  796. $_cpage = "projects";
  797. }
  798. //close contacts
  799. function closeProjects() {
  800. $(".projectsLayer").fadeOut(1000);
  801. }
  802. //close sub layer and show projects
  803. function closeAndShowPro(str) {
  804. console.log(str);
  805. $("." + str + "").fadeOut(1000);
  806. setTimeout(function () {
  807. showProjects();
  808. }, 500);
  809. }
  810. //close sub layer and show careers
  811. function closeAndShowCareers() {
  812. $(".whoWeAre").fadeOut(1000);
  813. setTimeout(function () {
  814. $(".whoWeAre").removeClass("in");
  815. showCareers();
  816. }, 500);
  817. }
  818. //show list-1
  819. function showList(id) {
  820. $('#frameList').attr("src", "projects-1.html?parent=" + id + "");
  821. $(".listLayer").addClass("in");
  822. //frameList.window.startWow();
  823. $(".main-menu").removeClass("active");
  824. //存入history数据,并设置当前页面
  825. history.pushState({
  826. page: 'list'
  827. }, "listLayer", "#list");
  828. $_cpage = "list";
  829. }
  830. //close list
  831. function closeList() {
  832. $(".listLayer").removeClass("in");
  833. }
  834. //show list-1
  835. function showDetail(src) {
  836. if (!src || src == "" || src == "#") {
  837. return false;
  838. }
  839. $('#frameDetail').attr("src", "." + src + "");
  840. $(".detailLayer").addClass("in");
  841. $(".main-menu").removeClass("active");
  842. //存入history数据,并设置当前页面
  843. history.pushState({
  844. page: 'detail'
  845. }, "detailLayer", "#detail");
  846. $_cpage = "detail";
  847. }
  848. //close list
  849. function closeDetail() {
  850. $(".detailLayer").removeClass("in");
  851. }
  852. //showSliderLink
  853. function showSliderLink(url) {
  854. if (!url || url == "" || url == "#") {
  855. return false;
  856. }
  857. $('#frameDetail').attr("src", "./" + url + "");
  858. $(".detailLayer").addClass("in");
  859. $(".main-menu").removeClass("active");
  860. //存入history数据,并设置当前页面
  861. history.pushState({
  862. page: 'detail'
  863. }, "detailLayer", "#detail");
  864. $_cpage = "detail";
  865. }
  866. //show do
  867. function showChuang() {
  868. $(".chuangLayer").addClass("in");
  869. frameChuang.window.startWow();
  870. $(".main-menu").removeClass("active");
  871. //存入history数据,并设置当前页面
  872. history.pushState({
  873. page: 'chuang'
  874. }, "chuang shiren ", "#chuang");
  875. $_cpage = "chuang";
  876. }
  877. //close what we do
  878. function closeChuang() {
  879. $(".chuangLayer").removeClass("in");
  880. }
  881. </script>
  882. </body>
  883. </html>