projects.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  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>PROJECTS | ELAB</title>
  9. <link href="css/reset.css" rel="stylesheet"></link>
  10. <link href="css/style.css?v=0.346785347683" rel="stylesheet"></link>
  11. <link href="css/animate.min.css" rel="stylesheet"></link>
  12. <style type="text/css">
  13. html,
  14. body {
  15. height: auto;
  16. min-height: 100%;
  17. background: #1b2030;
  18. }
  19. #projects {
  20. width: 100%;
  21. height: auto;
  22. background: #1b2030;
  23. max-width: none;
  24. overflow-x: hidden;
  25. overflow-y: auto;
  26. }
  27. .slide-line, .slide-line1 {
  28. background: #fff;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="page" id="projects">
  34. <!--top menu-->
  35. <div class="top-menu wow fadeInDown" data-wow-delay="1s" data-wow-duration="1s">
  36. <div class="logo">
  37. <a href="javascript:parent.showIndex();"><img class="inner-icon"
  38. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png"/></a>
  39. </div>
  40. <div class="menu"><img class="inner-icon"
  41. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png"/></div>
  42. <div class="cases"><a href="javascript:void(0);"><img class="inner-icon"
  43. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png"/></a>
  44. </div>
  45. </div>
  46. <!--main menu-->
  47. <div class="main-menu">
  48. <div class="menu-background"></div>
  49. <!--contact us-->
  50. <div class="menu-contact">
  51. <div class="menu-contact-list">
  52. <div class="menu-contact-map">
  53. <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">
  54. <div class="map-icon">
  55. <img class="map-img" src="https://dm.static.elab-plus.com/elabGuanWang/Location@2x.png">
  56. </div>
  57. <div class="map-address">
  58. <p>地址</p>
  59. </div>
  60. <div class="map-desc">
  61. <p>上海市静安区彭江路602号E座408室</p>
  62. </div>
  63. </a>
  64. </div>
  65. <div class="menu-contact-phone">
  66. <div class="phone-icon">
  67. <img class="phone-img" src="https://dm.static.elab-plus.com/elabGuanWang/Phone@2x.png">
  68. </div>
  69. <div class="phone-address">
  70. <p>电话</p>
  71. </div>
  72. <div class="phone-desc">
  73. <p><a href="tel:02156519508">021-56519508</a></p>
  74. </div>
  75. </div>
  76. <div class="menu-contact-mail">
  77. <div class="email-icon">
  78. <img class="email-img" src="https://dm.static.elab-plus.com/elabGuanWang/Email@2x.png">
  79. </div>
  80. <div class="email-address">
  81. <p>邮件</p>
  82. </div>
  83. <div class="email-desc">
  84. <p><a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a></p>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <!--CONTACT US-->
  90. <div class="menu-close"></div>
  91. <ul class="menu-list">
  92. <li class="elab_who">
  93. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showWho();">ELAB是谁
  94. <small>WHO IS ELAB</small>
  95. </a>
  96. </li>
  97. <li class="elab_what">
  98. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showDo();">ELAB在做什么
  99. <small>WHAT ELAB DO</small>
  100. </a>
  101. </li>
  102. <li class="elab_news">
  103. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showNews();">新闻中心
  104. <small>NEWS</small>
  105. </a>
  106. </li>
  107. <li class="elab_project">
  108. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showProjects();">作品案例
  109. <small>PROJECTS</small>
  110. </a>
  111. </li>
  112. <li class="elab_contact">
  113. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showCareers();">加入我们
  114. <small>CAREERS</small>
  115. </a>
  116. </li>
  117. <!--<li>-->
  118. <!--<a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showContact();">联系我们-->
  119. <!--<small>CONTACTS</small>-->
  120. <!--</a>-->
  121. <!--</li>-->
  122. </ul>
  123. </div>
  124. <div class="who-we-are wow fadeInUpIndex" data-wow-delay="2s" data-wow-duration="1s">
  125. <p>
  126. <a href="javascript:parent.closeProjects();parent.showWho();">我们是谁</a>
  127. </p>
  128. <div class="slide-line"></div>
  129. <div class="slide-line1"></div>
  130. </div>
  131. <div class="what-we-do wow fadeInUpIndex1" data-wow-delay="2s" data-wow-duration="1s">
  132. <p>
  133. <a href="javascript:parent.closeProjects();parent.showDo();">我们在做什么</a>
  134. </p>
  135. <div class="slide-line"></div>
  136. <div class="slide-line1"></div>
  137. </div>
  138. <!--main-->
  139. <div class="project-list"></div>
  140. </div>
  141. <script src="js/jquery-1.11.3.min.js"></script>
  142. <script src="js/wow.js"></script>
  143. <script>
  144. var markIdx = 0;
  145. var currentIdx = 0;
  146. var lastIdx = 0;
  147. $(function () {
  148. <!-- menu hover start-->
  149. $('.elab_who').hover(function () {
  150. currentIdx = 1;
  151. // $(".elab_who").css("opacity","1");
  152. // $(".elab_who").removeClass("animate_fadeIn");
  153. // $(".elab_what").removeClass("animate_fadeIn");
  154. // $(".elab_news").removeClass("animate_fadeIn");
  155. // $(".elab_project").removeClass("animate_fadeIn");
  156. // $(".elab_contact").removeClass("animate_fadeIn");
  157. //
  158. // $(".elab_what").addClass("animate_fadeOut");
  159. // $(".elab_news").addClass("animate_fadeOut");
  160. // $(".elab_project").addClass("animate_fadeOut");
  161. // $(".elab_contact").addClass("animate_fadeOut");
  162. },function () {
  163. currentIdx = 0;
  164. // $(".elab_who").css("opacity","1");
  165. //
  166. // $(".elab_who").removeClass("animate_fadeOut");
  167. // $(".elab_what").removeClass("animate_fadeOut");
  168. // $(".elab_news").removeClass("animate_fadeOut");
  169. // $(".elab_project").removeClass("animate_fadeOut");
  170. // $(".elab_contact").removeClass("animate_fadeOut");
  171. // $(".elab_what").addClass("animate_fadeIn");
  172. // $(".elab_news").addClass("animate_fadeIn");
  173. // $(".elab_project").addClass("animate_fadeIn");
  174. // $(".elab_contact").addClass("animate_fadeIn");
  175. });
  176. $('.elab_what').hover(function () {
  177. currentIdx = 2;
  178. // $(".elab_what").css("opacity","1");
  179. // $(".elab_who").removeClass("animate_fadeIn");
  180. // $(".elab_what").removeClass("animate_fadeIn");
  181. // $(".elab_news").removeClass("animate_fadeIn");
  182. // $(".elab_project").removeClass("animate_fadeIn");
  183. // $(".elab_contact").removeClass("animate_fadeIn");
  184. },function () {
  185. currentIdx = 0;
  186. /* $(".elab_what").css("opacity","1");
  187. $(".elab_who").removeClass("animate_fadeOut");
  188. $(".elab_what").removeClass("animate_fadeOut");
  189. $(".elab_news").removeClass("animate_fadeOut");
  190. $(".elab_project").removeClass("animate_fadeOut");
  191. $(".elab_contact").removeClass("animate_fadeOut");*/
  192. // $(".elab_who").addClass("animate_fadeIn");
  193. // $(".elab_news").addClass("animate_fadeIn");
  194. // $(".elab_project").addClass("animate_fadeIn");
  195. // $(".elab_contact").addClass("animate_fadeIn");
  196. });
  197. $('.elab_news').hover(function () {
  198. currentIdx = 3;
  199. /*$(".elab_news").css("opacity","1");
  200. $(".elab_who").removeClass("animate_fadeIn");
  201. $(".elab_what").removeClass("animate_fadeIn");
  202. $(".elab_news").removeClass("animate_fadeIn");
  203. $(".elab_project").removeClass("animate_fadeIn");
  204. $(".elab_contact").removeClass("animate_fadeIn");*/
  205. },function () {
  206. currentIdx = 0;
  207. /*$(".elab_news").css("opacity","1");
  208. $(".elab_who").removeClass("animate_fadeOut");
  209. $(".elab_what").removeClass("animate_fadeOut");
  210. $(".elab_news").removeClass("animate_fadeOut");
  211. $(".elab_project").removeClass("animate_fadeOut");
  212. $(".elab_contact").removeClass("animate_fadeOut");*/
  213. // $(".elab_who").addClass("animate_fadeIn");
  214. // $(".elab_what").addClass("animate_fadeIn");
  215. // $(".elab_project").addClass("animate_fadeIn");
  216. // $(".elab_contact").addClass("animate_fadeIn");
  217. });
  218. $('.elab_project').hover(function () {
  219. currentIdx = 4;
  220. /*$(".elab_project").css("opacity","1");
  221. $(".elab_who").removeClass("animate_fadeIn");
  222. $(".elab_what").removeClass("animate_fadeIn");
  223. $(".elab_news").removeClass("animate_fadeIn");
  224. $(".elab_project").removeClass("animate_fadeIn");
  225. $(".elab_contact").removeClass("animate_fadeIn");
  226. $(".elab_who").addClass("animate_fadeOut");
  227. $(".elab_what").addClass("animate_fadeOut");
  228. $(".elab_news").addClass("animate_fadeOut");
  229. $(".elab_contact").addClass("animate_fadeOut");*/
  230. },function () {
  231. currentIdx = 0;
  232. /*$(".elab_project").css("opacity","1");
  233. $(".elab_who").removeClass("animate_fadeOut");
  234. $(".elab_what").removeClass("animate_fadeOut");
  235. $(".elab_news").removeClass("animate_fadeOut");
  236. $(".elab_project").removeClass("animate_fadeOut");
  237. $(".elab_contact").removeClass("animate_fadeOut");
  238. $(".elab_who").addClass("animate_fadeIn");
  239. $(".elab_what").addClass("animate_fadeIn");
  240. $(".elab_news").addClass("animate_fadeIn");
  241. $(".elab_contact").addClass("animate_fadeIn");*/
  242. });
  243. $('.elab_contact').hover(function () {
  244. currentIdx = 5;
  245. /*$(".elab_contact").css("opacity","1");
  246. $(".elab_who").removeClass("animate_fadeIn");
  247. $(".elab_what").removeClass("animate_fadeIn");
  248. $(".elab_news").removeClass("animate_fadeIn");
  249. $(".elab_project").removeClass("animate_fadeIn");
  250. $(".elab_contact").removeClass("animate_fadeIn");
  251. $(".elab_who").addClass("animate_fadeOut");
  252. $(".elab_what").addClass("animate_fadeOut");
  253. $(".elab_news").addClass("animate_fadeOut");
  254. $(".elab_project").addClass("animate_fadeOut");*/
  255. },function () {
  256. currentIdx = 0;
  257. /* $(".elab_contact").css("opacity","1");
  258. $(".elab_who").removeClass("animate_fadeOut");
  259. $(".elab_what").removeClass("animate_fadeOut");
  260. $(".elab_news").removeClass("animate_fadeOut");
  261. $(".elab_project").removeClass("animate_fadeOut");
  262. $(".elab_contact").removeClass("animate_fadeOut");
  263. $(".elab_who").addClass("animate_fadeIn");
  264. $(".elab_what").addClass("animate_fadeIn");
  265. $(".elab_news").addClass("animate_fadeIn");
  266. $(".elab_project").addClass("animate_fadeIn");*/
  267. });
  268. <!-- menu hover end -->
  269. <!--mouse over listener start-->
  270. <!--mouse over listener end-->
  271. setInterval(function () {
  272. if(markIdx !== currentIdx){
  273. markIdx = currentIdx;
  274. var link = '';
  275. var empty = true;
  276. switch (markIdx) {
  277. case 0:
  278. link = '';
  279. empty = true;
  280. break;
  281. case 1:
  282. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
  283. empty = false;
  284. break;
  285. case 2:
  286. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
  287. empty = false;
  288. break;
  289. case 3:
  290. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
  291. empty = false;
  292. break;
  293. case 4:
  294. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
  295. empty = false;
  296. break;
  297. case 5:
  298. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
  299. empty = false;
  300. break;
  301. }
  302. if(empty){
  303. $(".menu-background").fadeOut(400,function () {
  304. $(".menu-background").css('background-image',link);
  305. });
  306. }else {
  307. if(lastIdx!==0){
  308. $(".menu-background").fadeOut(400,function () {
  309. $(".menu-background").css('background-image',link);
  310. $(".menu-background").fadeIn(800);
  311. })
  312. }else {
  313. $(".menu-background").css('background-image',link);
  314. $(".menu-background").fadeIn(800);
  315. }
  316. }
  317. lastIdx = markIdx;
  318. }
  319. },1210);
  320. //show menu
  321. $(".menu").on("click", function (e) {
  322. $(".main-menu").addClass("active");
  323. });
  324. //close menu
  325. $('.menu-close').on('click', function (e) {
  326. $(".main-menu").removeClass("active");
  327. });
  328. //hover style
  329. $(".who-we-are").on('mouseover', function (e) {
  330. $(".footer .left,#leftWave").addClass("active");
  331. $(".who-we-are .slide-line,.who-we-are .slide-line1").addClass("active");
  332. });
  333. $(".who-we-are").on('mouseout', function (e) {
  334. $(".footer .left,#leftWave").removeClass("active");
  335. $(".who-we-are .slide-line,.who-we-are .slide-line1").removeClass("active").addClass("fadeInUp");
  336. });
  337. $(".what-we-do").on('mouseover', function (e) {
  338. $(".footer .right,#rightWave").addClass("active");
  339. $(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
  340. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
  341. });
  342. $(".what-we-do").on('mouseout', function (e) {
  343. //setTimeout(function(){
  344. $(".footer .right,#rightWave").removeClass("active");
  345. $(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
  346. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
  347. //},600);
  348. });
  349. //读取分类数据
  350. $.get("http://106.14.225.13:8081/rest/listCategory1", function (result) {
  351. console.log(result);
  352. var $_list = result.result.list;
  353. var host = "";
  354. if ($_list.length > 0) {
  355. $(".project-list").empty();//清空demo
  356. for (var i = 0; i < $_list.length; i++) {
  357. var tmp = $_list[i];
  358. var $_t = 0.1;
  359. if (i < 2) {
  360. $_t = (1 + i) * 0.2;
  361. }
  362. console.log($_t);
  363. var $_img = (host + tmp['image1']) || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  364. var $_html = `<div class="project-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
  365. <img class="inner-icon" src="${$_img}" />
  366. <div class="item-desc item-inner"><span>${tmp['textTitle']}</span></div>
  367. <div class="item-title item-inner">${tmp['textCn']}<p>${tmp['textEn']}</p></div>
  368. <div class="item-link item-inner"><a href="javascript:parent.showList(${tmp['id']})" target="_self">浏览作品</a></div>
  369. </div>`;
  370. $(".project-list").append($_html);
  371. }
  372. }
  373. });
  374. });
  375. function startWow() {
  376. //start wow
  377. var wow = new WOW({
  378. boxClass: 'wow',
  379. animateClass: 'animated',
  380. offset: 100,
  381. mobile: true,
  382. live: true
  383. });
  384. wow.init();
  385. }
  386. function menuShowProjects() {
  387. top.closeAndShowPro('projectsLayer');
  388. }
  389. </script>
  390. </body>
  391. </html>