projects-1.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  6. <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'>
  7. <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  8. <title>PROJECTS | ELAB</title>
  9. <link rel="stylesheet" href="css/reset.css"></link>
  10. <link rel="stylesheet" href="css/style.css"></link>
  11. <link rel="stylesheet" href="css/animate.min.css"></link>
  12. <style type="text/css">
  13. html,
  14. body {
  15. background: #1b2030;
  16. height: auto;
  17. }
  18. .slide-line,.slide-line1{
  19. background: #fff;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="projects" class="page">
  25. <!--top menu-->
  26. <div class="top-menu wow fadeInDown" data-wow-duration="1s" data-wow-delay="2s">
  27. <div class="logo">
  28. <a href="javascript:parent.showIndex();"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png" /></a>
  29. </div>
  30. <div class="menu"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png" /></div>
  31. <div class="cases"><a href="javascript:parent.showIndex();parent.showProjects();"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png" /></a></div>
  32. </div>
  33. <!--main menu-->
  34. <div class="main-menu">
  35. <div class="menu-close"></div>
  36. <ul class="menu-list">
  37. <li>
  38. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showWho();">我们是谁<small>WHO WE ARE</small></a>
  39. </li>
  40. <li>
  41. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showDo();">我们在做什么<small>WHAT WE DO</small></a>
  42. </li>
  43. <li>
  44. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showProjects();">作品案例<small>PROJECTS</small></a>
  45. </li>
  46. <li>
  47. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showCareers();">加入我们<small>CAREERS</small></a>
  48. </li>
  49. <li>
  50. <a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showContact();">联系我们<small>CONTACTS</small></a>
  51. </li>
  52. </ul>
  53. </div>
  54. <div class="who-we-are wow fadeInUpIndex" data-wow-duration="1s" data-wow-delay="3s">
  55. <p>
  56. <a href="javascript:thisShowWho();">我们是谁</a>
  57. </p>
  58. <div class="slide-line"></div>
  59. <div class="slide-line1"></div>
  60. </div>
  61. <div class="what-we-do wow fadeInUpIndex1" data-wow-duration="1s" data-wow-delay="3s">
  62. <p>
  63. <a href="javascript:parent.closeProjects();parent.closeList();parent.showDo();">我们在做什么</a>
  64. </p>
  65. <div class="slide-line"></div>
  66. <div class="slide-line1"></div>
  67. </div>
  68. <!--main-->
  69. <div class="project-list">
  70. <!--single item-->
  71. <div class="project-item-inner">
  72. <img class="inner-icon wow fadeIn" data-wow-duration="1s" data-wow-delay="3s" id="bigImage" src="" />
  73. <div class="close-bar wow fadeIn" data-wow-duration="1s" data-wow-delay="3.5s"></div>
  74. <div class="item-desc item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="4s"><span></span></div>
  75. <div class="item-title item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="4s">
  76. <p></p>
  77. </div>
  78. <div class="item-link item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="4s">
  79. <!--<a href="projects-1-1.html">宁波</a><span class="small-line"></span>
  80. <a href="projects-1-1.html">无锡</a>-->
  81. </div>
  82. </div>
  83. <!--/single item-->
  84. </div>
  85. </div>
  86. <script src="js/jquery-1.11.3.min.js"></script>
  87. <script src="js/wow.js"></script>
  88. <script>
  89. $(function() {
  90. //show menu
  91. $(".menu").on("click", function(e) {
  92. $(".main-menu").addClass("active");
  93. });
  94. //close menu
  95. $('.menu-close').on('click', function(e) {
  96. $(".main-menu").removeClass("active");
  97. });
  98. //hover style
  99. $(".who-we-are").on('mouseover', function(e) {
  100. $(".footer .left,#leftWave").addClass("active");
  101. $(".who-we-are .slide-line,.who-we-are .slide-line1").addClass("active");
  102. });
  103. $(".who-we-are").on('mouseout', function(e) {
  104. $(".footer .left,#leftWave").removeClass("active");
  105. $(".who-we-are .slide-line,.who-we-are .slide-line1").removeClass("active").addClass("fadeInUp");
  106. });
  107. $(".what-we-do").on('mouseover', function(e) {
  108. $(".footer .right,#rightWave").addClass("active");
  109. $(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
  110. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
  111. });
  112. $(".what-we-do").on('mouseout', function(e) {
  113. //setTimeout(function(){
  114. $(".footer .right,#rightWave").removeClass("active");
  115. $(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
  116. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
  117. //},600);
  118. });
  119. //加载数据
  120. var parentid = getQueryString("parent") || '';
  121. if(!parentid || parentid == '') {
  122. return false;
  123. } //父ID参数错误
  124. //加载大类信息
  125. $.get("http://106.14.225.13:8081/rest/listCategory1", function(result) {
  126. console.log(result);
  127. var $_list = result.result.list;
  128. var host = "";
  129. if($_list.length > 0) {
  130. for(var i = 0; i < $_list.length; i++) {
  131. var tmp = $_list[i];
  132. if(tmp['id'] == parentid) { //当前分类数据
  133. var $_img = (host+tmp['image2']) || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_6.jpg';
  134. $("#bigImage").attr("src", $_img); //大图
  135. $(".item-desc").html("<span>" + tmp["textTitle"] + "</span>");
  136. $(".item-title").html("" + tmp["textCn"] + "<p>" + tmp["textEn"] + "</p>");
  137. }
  138. }
  139. }
  140. });
  141. $.get("http://106.14.225.13:8081/rest/listCategory2?parent=" + parentid + "", function(result) {
  142. //console.log(result);
  143. var $_list = result.result.list;
  144. if($_list.length > 0) {
  145. $(".item-link").empty(); //清空demo
  146. for(var i = 0; i < $_list.length; i++) {
  147. var tmp = $_list[i];
  148. var $_html = `<a href="javascript:parent.showDetail('${tmp['url']}');">${tmp['location']}</a><span class="small-line"></span>`;
  149. $(".item-link").append($_html);
  150. }
  151. }
  152. });
  153. //close-bar click
  154. $('.close-bar').on('click', function(e) {
  155. parent.closeList();
  156. });
  157. var wow = new WOW({
  158. boxClass: 'wow',
  159. animateClass: 'animated',
  160. offset: 0,
  161. mobile: false,
  162. live: true
  163. });
  164. wow.init();
  165. });
  166. function thisShowWho(){
  167. parent.closeProjects();
  168. parent.closeList();
  169. parent.showWho();
  170. }
  171. function getQueryString(name) {
  172. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  173. var r = window.location.search.substr(1).match(reg);
  174. if(r != null) {
  175. return decodeURI(r[2]);
  176. } else {
  177. return null;
  178. }
  179. }
  180. </script>
  181. </body>
  182. </html>