projects.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  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. $(".elab_what").addClass("animate_fadeOut");
  158. $(".elab_news").addClass("animate_fadeOut");
  159. $(".elab_project").addClass("animate_fadeOut");
  160. $(".elab_contact").addClass("animate_fadeOut");
  161. },function () {
  162. currentIdx = 0;
  163. $(".elab_who").css("opacity","1");
  164. $(".elab_who").removeClass("animate_fadeOut");
  165. $(".elab_what").removeClass("animate_fadeOut");
  166. $(".elab_news").removeClass("animate_fadeOut");
  167. $(".elab_project").removeClass("animate_fadeOut");
  168. $(".elab_contact").removeClass("animate_fadeOut");
  169. $(".elab_what").addClass("animate_fadeIn");
  170. $(".elab_news").addClass("animate_fadeIn");
  171. $(".elab_project").addClass("animate_fadeIn");
  172. $(".elab_contact").addClass("animate_fadeIn");
  173. });
  174. $('.elab_what').hover(function () {
  175. currentIdx = 2;
  176. $(".elab_what").css("opacity","1");
  177. $(".elab_who").removeClass("animate_fadeIn");
  178. $(".elab_what").removeClass("animate_fadeIn");
  179. $(".elab_news").removeClass("animate_fadeIn");
  180. $(".elab_project").removeClass("animate_fadeIn");
  181. $(".elab_contact").removeClass("animate_fadeIn");
  182. $(".elab_who").addClass("animate_fadeOut");
  183. $(".elab_news").addClass("animate_fadeOut");
  184. $(".elab_project").addClass("animate_fadeOut");
  185. $(".elab_contact").addClass("animate_fadeOut");
  186. },function () {
  187. currentIdx = 0;
  188. $(".elab_what").css("opacity","1");
  189. $(".elab_who").removeClass("animate_fadeOut");
  190. $(".elab_what").removeClass("animate_fadeOut");
  191. $(".elab_news").removeClass("animate_fadeOut");
  192. $(".elab_project").removeClass("animate_fadeOut");
  193. $(".elab_contact").removeClass("animate_fadeOut");
  194. $(".elab_who").addClass("animate_fadeIn");
  195. $(".elab_news").addClass("animate_fadeIn");
  196. $(".elab_project").addClass("animate_fadeIn");
  197. $(".elab_contact").addClass("animate_fadeIn");
  198. });
  199. $('.elab_news').hover(function () {
  200. currentIdx = 3;
  201. $(".elab_news").css("opacity","1");
  202. $(".elab_who").removeClass("animate_fadeIn");
  203. $(".elab_what").removeClass("animate_fadeIn");
  204. $(".elab_news").removeClass("animate_fadeIn");
  205. $(".elab_project").removeClass("animate_fadeIn");
  206. $(".elab_contact").removeClass("animate_fadeIn");
  207. $(".elab_who").addClass("animate_fadeOut");
  208. $(".elab_what").addClass("animate_fadeOut");
  209. $(".elab_project").addClass("animate_fadeOut");
  210. $(".elab_contact").addClass("animate_fadeOut");
  211. },function () {
  212. currentIdx = 0;
  213. $(".elab_news").css("opacity","1");
  214. $(".elab_who").removeClass("animate_fadeOut");
  215. $(".elab_what").removeClass("animate_fadeOut");
  216. $(".elab_news").removeClass("animate_fadeOut");
  217. $(".elab_project").removeClass("animate_fadeOut");
  218. $(".elab_contact").removeClass("animate_fadeOut");
  219. $(".elab_who").addClass("animate_fadeIn");
  220. $(".elab_what").addClass("animate_fadeIn");
  221. $(".elab_project").addClass("animate_fadeIn");
  222. $(".elab_contact").addClass("animate_fadeIn");
  223. });
  224. $('.elab_project').hover(function () {
  225. currentIdx = 4;
  226. $(".elab_project").css("opacity","1");
  227. $(".elab_who").removeClass("animate_fadeIn");
  228. $(".elab_what").removeClass("animate_fadeIn");
  229. $(".elab_news").removeClass("animate_fadeIn");
  230. $(".elab_project").removeClass("animate_fadeIn");
  231. $(".elab_contact").removeClass("animate_fadeIn");
  232. $(".elab_who").addClass("animate_fadeOut");
  233. $(".elab_what").addClass("animate_fadeOut");
  234. $(".elab_news").addClass("animate_fadeOut");
  235. $(".elab_contact").addClass("animate_fadeOut");
  236. },function () {
  237. currentIdx = 0;
  238. $(".elab_project").css("opacity","1");
  239. $(".elab_who").removeClass("animate_fadeOut");
  240. $(".elab_what").removeClass("animate_fadeOut");
  241. $(".elab_news").removeClass("animate_fadeOut");
  242. $(".elab_project").removeClass("animate_fadeOut");
  243. $(".elab_contact").removeClass("animate_fadeOut");
  244. $(".elab_who").addClass("animate_fadeIn");
  245. $(".elab_what").addClass("animate_fadeIn");
  246. $(".elab_news").addClass("animate_fadeIn");
  247. $(".elab_contact").addClass("animate_fadeIn");
  248. });
  249. $('.elab_contact').hover(function () {
  250. currentIdx = 5;
  251. $(".elab_contact").css("opacity","1");
  252. $(".elab_who").removeClass("animate_fadeIn");
  253. $(".elab_what").removeClass("animate_fadeIn");
  254. $(".elab_news").removeClass("animate_fadeIn");
  255. $(".elab_project").removeClass("animate_fadeIn");
  256. $(".elab_contact").removeClass("animate_fadeIn");
  257. $(".elab_who").addClass("animate_fadeOut");
  258. $(".elab_what").addClass("animate_fadeOut");
  259. $(".elab_news").addClass("animate_fadeOut");
  260. $(".elab_project").addClass("animate_fadeOut");
  261. },function () {
  262. currentIdx = 0;
  263. $(".elab_contact").css("opacity","1");
  264. $(".elab_who").removeClass("animate_fadeOut");
  265. $(".elab_what").removeClass("animate_fadeOut");
  266. $(".elab_news").removeClass("animate_fadeOut");
  267. $(".elab_project").removeClass("animate_fadeOut");
  268. $(".elab_contact").removeClass("animate_fadeOut");
  269. $(".elab_who").addClass("animate_fadeIn");
  270. $(".elab_what").addClass("animate_fadeIn");
  271. $(".elab_news").addClass("animate_fadeIn");
  272. $(".elab_project").addClass("animate_fadeIn");
  273. });
  274. <!-- menu hover end -->
  275. <!--mouse over listener start-->
  276. <!--mouse over listener end-->
  277. setInterval(function () {
  278. if(markIdx !== currentIdx){
  279. markIdx = currentIdx;
  280. var link = '';
  281. var empty = true;
  282. switch (markIdx) {
  283. case 0:
  284. link = '';
  285. empty = true;
  286. break;
  287. case 1:
  288. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
  289. empty = false;
  290. break;
  291. case 2:
  292. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
  293. empty = false;
  294. break;
  295. case 3:
  296. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
  297. empty = false;
  298. break;
  299. case 4:
  300. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
  301. empty = false;
  302. break;
  303. case 5:
  304. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
  305. empty = false;
  306. break;
  307. }
  308. if(empty){
  309. $(".menu-background").fadeOut(400,function () {
  310. $(".menu-background").css('background-image',link);
  311. });
  312. }else {
  313. if(lastIdx!==0){
  314. $(".menu-background").fadeOut(400,function () {
  315. $(".menu-background").css('background-image',link);
  316. $(".menu-background").fadeIn(800);
  317. })
  318. }else {
  319. $(".menu-background").css('background-image',link);
  320. $(".menu-background").fadeIn(800);
  321. }
  322. }
  323. lastIdx = markIdx;
  324. }
  325. },1210);
  326. //show menu
  327. $(".menu").on("click", function (e) {
  328. $(".main-menu").addClass("active");
  329. });
  330. //close menu
  331. $('.menu-close').on('click', function (e) {
  332. $(".main-menu").removeClass("active");
  333. });
  334. //hover style
  335. $(".who-we-are").on('mouseover', function (e) {
  336. $(".footer .left,#leftWave").addClass("active");
  337. $(".who-we-are .slide-line,.who-we-are .slide-line1").addClass("active");
  338. });
  339. $(".who-we-are").on('mouseout', function (e) {
  340. $(".footer .left,#leftWave").removeClass("active");
  341. $(".who-we-are .slide-line,.who-we-are .slide-line1").removeClass("active").addClass("fadeInUp");
  342. });
  343. $(".what-we-do").on('mouseover', function (e) {
  344. $(".footer .right,#rightWave").addClass("active");
  345. $(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
  346. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
  347. });
  348. $(".what-we-do").on('mouseout', function (e) {
  349. //setTimeout(function(){
  350. $(".footer .right,#rightWave").removeClass("active");
  351. $(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
  352. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
  353. //},600);
  354. });
  355. //读取分类数据
  356. $.get("http://106.14.225.13:8081/rest/listCategory1", function (result) {
  357. console.log(result);
  358. var $_list = result.result.list;
  359. var host = "";
  360. if ($_list.length > 0) {
  361. $(".project-list").empty();//清空demo
  362. for (var i = 0; i < $_list.length; i++) {
  363. var tmp = $_list[i];
  364. var $_t = 0.1;
  365. if (i < 2) {
  366. $_t = (1 + i) * 0.2;
  367. }
  368. console.log($_t);
  369. var $_img = (host + tmp['image1']) || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  370. var $_html = `<div class="project-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
  371. <img class="inner-icon" src="${$_img}" />
  372. <div class="item-desc item-inner"><span>${tmp['textTitle']}</span></div>
  373. <div class="item-title item-inner">${tmp['textCn']}<p>${tmp['textEn']}</p></div>
  374. <div class="item-link item-inner"><a href="javascript:parent.showList(${tmp['id']})" target="_self">浏览作品</a></div>
  375. </div>`;
  376. $(".project-list").append($_html);
  377. }
  378. }
  379. });
  380. });
  381. function startWow() {
  382. //start wow
  383. var wow = new WOW({
  384. boxClass: 'wow',
  385. animateClass: 'animated',
  386. offset: 100,
  387. mobile: true,
  388. live: true
  389. });
  390. wow.init();
  391. }
  392. function menuShowProjects() {
  393. top.closeAndShowPro('projectsLayer');
  394. }
  395. </script>
  396. </body>
  397. </html>