licheng.html 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="description" content="">
  8. <link rel="stylesheet" href="css/reset.css">
  9. <link rel="stylesheet" href="css/index.css?v=1.0734757">
  10. <link rel="stylesheet" href="css/animate.min.css"></link>
  11. <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
  12. <link href="css/style.css?v=0.346785347683" rel="stylesheet"/>
  13. <script src="js/jquery-1.11.3.min.js"></script>
  14. <script src="js/layer/layer.js"></script>
  15. <script src="js/rem.js"></script>
  16. <script src="js/swiper-3.4.2.min.js"></script>
  17. <script>
  18. window['adaptive'].desinWidth = 750;
  19. window['adaptive'].init();
  20. </script>
  21. <style type="text/css">
  22. body {
  23. background: #1e2538;
  24. height: auto;
  25. }
  26. .hideTimeLine {
  27. width: 100%;
  28. display: none;
  29. }
  30. .hj_box h3 {
  31. position: absolute;
  32. left: 0;
  33. top: 40%;
  34. z-index: 30;
  35. width: 100%;
  36. text-align: center;
  37. }
  38. .hj_box .more1 {
  39. position: absolute;
  40. z-index: 30;
  41. left: calc(50% - 190px);
  42. top: 70%;
  43. }
  44. .hj_box .more2 {
  45. position: absolute;
  46. z-index: 30;
  47. left: calc(50% + 30px);
  48. top: 70%;
  49. }
  50. .section4_list {
  51. width: 100%;
  52. max-width: 1440px;
  53. margin: 0 auto;
  54. }
  55. .section4_list li .section4_list_box {
  56. /*transition: all ease 0.5s;
  57. padding-top: 20px;
  58. cursor: pointer;*/
  59. }
  60. .section4_list li:hover .section4_list_box {
  61. /*transform: translateY(-10px);*/
  62. }
  63. .first-rc {
  64. padding-left: 2.2%;
  65. padding-bottom: 3px;
  66. }
  67. .section5 {
  68. padding: 0;
  69. position: relative;
  70. height: 900px;
  71. padding: 30px 0;
  72. }
  73. .section5 .hj_box {
  74. height: 100%;
  75. background: none;
  76. padding: 0;
  77. overflow: hidden;
  78. position: relative;
  79. }
  80. .swiper {
  81. width: 100%;
  82. height: 100%;
  83. padding-bottom: 0;
  84. background: none;
  85. position: absolute;
  86. left: 0;
  87. top: 0;
  88. }
  89. .section5 .a_btn {
  90. width: 100%;
  91. left: 0;
  92. bottom: 20%;
  93. z-index: 30;
  94. margin-top: 0;
  95. }
  96. .swiper img{
  97. width: 100%;
  98. height: 100%;
  99. text-align: left;
  100. object-fit: contain;
  101. }
  102. /***middle**/
  103. @media only screen and (max-width: 1280px) {
  104. .progress>p.p_fir1 span {
  105. width: 358px;
  106. }
  107. }
  108. @media(max-width:1024px) {
  109. .section5{
  110. height: 650px;
  111. }
  112. .a_btn a{
  113. width: 1.5rem;
  114. font-size: 0.16rem;
  115. height: 0.4rem;
  116. line-height: 0.4rem;
  117. }
  118. .hj_box .more1 {
  119. position: absolute;
  120. z-index: 30;
  121. left: calc(50% - 2rem);
  122. top: 70%;
  123. }
  124. .hj_box .more2 {
  125. position: absolute;
  126. z-index: 30;
  127. left: calc(50% + 0.5rem);
  128. top: 70%;
  129. }
  130. .more{
  131. height: 0.4rem;
  132. font-size: 0.15rem;
  133. line-height: 0.42rem;
  134. }
  135. }
  136. @media(max-width:768px) {
  137. .section5{
  138. height: 500px;
  139. }
  140. }
  141. @media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) {
  142. .first-rc {
  143. padding-left: 2.4%;
  144. padding-bottom: 3px;
  145. }
  146. .section5{
  147. height: 300px;
  148. }
  149. html, body {
  150. height: 100%;
  151. overflow: auto;
  152. -webkit-overflow-scrolling: touch;
  153. }
  154. }
  155. </style>
  156. </head>
  157. <body class="bg01">
  158. <div class="container">
  159. <!--top menu-->
  160. <div class="top-menu wow fadeInDown" data-wow-duration="1s" data-wow-delay="2s">
  161. <div class="logo">
  162. <a href="javascript:parent.showIndex();"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png" /></a>
  163. </div>
  164. <div class="menu"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png" /></div>
  165. <div class="cases">
  166. <a href="javascript:innerShowPro();"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png" /></a>
  167. </div>
  168. </div>
  169. <div class="what-we-do wow fadeInUpIndex1" data-wow-duration="1s" data-wow-delay="4s">
  170. <p>
  171. <a href="javascript:parent.closeWho();parent.showDo();">我们在做什么</a>
  172. </p>
  173. <div class="slide-line"></div>
  174. <div class="slide-line1"></div>
  175. </div>
  176. <!--main menu-->
  177. <div class="main-menu">
  178. <div class="menu-background"></div>
  179. <!--contact us-->
  180. <div class="menu-contact">
  181. <div class="menu-contact-list">
  182. <div class="menu-contact-map">
  183. <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">
  184. <div class="map-icon">
  185. <img class="map-img" src="https://dm.static.elab-plus.com/elabGuanWang/Location@2x.png">
  186. </div>
  187. <div class="map-address">
  188. <p>地址</p>
  189. </div>
  190. <div class="map-desc">
  191. <p>上海市静安区彭江路602号E座408室</p>
  192. </div>
  193. </a>
  194. </div>
  195. <div class="menu-contact-phone">
  196. <div class="phone-icon">
  197. <img class="phone-img" src="https://dm.static.elab-plus.com/elabGuanWang/Phone@2x.png">
  198. </div>
  199. <div class="phone-address">
  200. <p>电话</p>
  201. </div>
  202. <div class="phone-desc">
  203. <p><a href="tel:02156519508">021-56519508</a></p>
  204. </div>
  205. </div>
  206. <div class="menu-contact-mail">
  207. <div class="email-icon">
  208. <img class="email-img" src="https://dm.static.elab-plus.com/elabGuanWang/Email@2x.png">
  209. </div>
  210. <div class="email-address">
  211. <p>邮件</p>
  212. </div>
  213. <div class="email-desc">
  214. <p><a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a></p>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. <!--CONTACT US-->
  220. <div class="menu-close"></div>
  221. <ul class="menu-list">
  222. <li class="elab_who">
  223. <a href="javascript:$('.main-menu').removeClass('active');parent.closeWho();parent.showWho();">ELAB是谁<small>WHO IS ELAB</small></a>
  224. </li>
  225. <li class="elab_what">
  226. <a href="javascript:$('.main-menu').removeClass('active');parent.closeWho();parent.showDo();">ELAB在做什么<small>WHAT ELAB DO</small></a>
  227. </li>
  228. <li class="elab_news">
  229. <a href="javascript:$('.main-menu').removeClass('active');parent.closeWho();parent.showNews();">新闻中心
  230. <small>NEWS</small>
  231. </a>
  232. </li>
  233. <li class="elab_project">
  234. <a href="javascript:$('.main-menu').removeClass('active');parent.closeWho();parent.showProjects();">作品案例<small>PROJECTS</small></a>
  235. </li>
  236. <li class="elab_contact">
  237. <a href="javascript:$('.main-menu').removeClass('active');parent.closeWho();parent.showCareers();">加入我们<small>CAREERS</small></a>
  238. </li>
  239. <!--<li>-->
  240. <!--<a href="javascript:$('.main-menu').removeClass('active');parent.closeWho();parent.showContact();">联系我们<small>CONTACTS</small></a>-->
  241. <!--</li>-->
  242. </ul>
  243. </div>
  244. <div class="section1 wow fadeIn" data-wow-duration="1s" data-wow-delay="2s">
  245. <div class="wrap csr">
  246. <h3 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="3s">探索·启程</h3>
  247. <p class="csr_text wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">2015年创业之初,创始人蔡雪梅TED演讲</p>
  248. <div class="a_btn clearfix">
  249. <a id="video_btn_ted"href="javascript:;" class="s_v wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">查看视频</a>
  250. <a href="javascript:parent.showChuang();" class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">了解创始人</a>
  251. </div>
  252. </div>
  253. </div>
  254. <div class="section2 wrap wow fadeInUp" data-wow-duration="1s">
  255. <h3>公司简介</h3>
  256. <p>ELAB是一家以技术和数据驱动的新型未来人居空间开发的互联网平台型公司。我们以客户需求为核心,实现创新性产品的预制性开发,并为开发商提供系统性整体解决方案。</p>
  257. <p>ELAB致力于实现居者及开发企业的价值最大化。通过技术、数据、产品赋能,逆转传统从土地到客户充满不确定性高风险的开发旧模式(B2C)为从客户到土地的新型房地产开发模式(C2B),从源头解决行业痛点,帮助企业长期可持续发展,同时从居者出发,挖掘居者真实居住需求,打造未来人居产品。</p>
  258. </div>
  259. <div class="section3 wrap">
  260. <h3 class="wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">业务范畴</h3>
  261. <ul class="yewu clearfix ">
  262. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  263. <h3>01</h3>
  264. <p>开发需求<br />线上平台前策</p>
  265. </li>
  266. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  267. <h3>02</h3>
  268. <p>创新产品原型输出<br/>及在线测试</p>
  269. </li>
  270. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  271. <h3>03</h3>
  272. <p>全案规划策划<br />及创新设计</p>
  273. </li>
  274. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  275. <h3>04</h3>
  276. <p>大麦SaaS智能营销</p>
  277. </li>
  278. </ul>
  279. </div>
  280. <div id="section4" class="section4 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0s">
  281. <ul class="section4_list">
  282. <li>
  283. <div class="section4_list_box first-rc">
  284. <h3 class="h3 latest wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">20<br />18</h3>
  285. <p class="p p1 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">NOW-B轮进行中</p>
  286. </div>
  287. </li>
  288. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  289. <div class="section4_list_box">
  290. <h3 class="h3 tag">08</h3>
  291. <p class="p">大麦SaaS智能营销系列产品-E看房APP上线</p>
  292. </div>
  293. </li>
  294. <li class="sec wow fadeInRight" data-wow-duration="1s" data-wow-delay="1s">
  295. <div class="section4_list_box">
  296. <h3 class="h3 tag">06</h3>
  297. <p class="p">大麦SaaS智能营销系列产品-WIII云案场,正式上线</p>
  298. </div>
  299. </li>
  300. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1.5s">
  301. <div class="section4_list_box">
  302. <h3 class="h3 tag">05</h3>
  303. <p class="p">大麦SaaS智能营销系列产品——WIII APP,正式上线</p>
  304. <p class="p">大麦SaaS智能营销系列产品——投放宝,正式上线</p>
  305. </div>
  306. </li>
  307. </ul>
  308. <div class="hideTimeLine">
  309. <ul class="section4_list section4_list01">
  310. <li class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0s">
  311. <div class="section4_list_box">
  312. <h3 class="h3 latest">20<br />17</h3>
  313. <!--<p class="p p1 p1-1">NOW-B轮进行中</p>-->
  314. </div>
  315. </li>
  316. <li class="wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
  317. <div class="section4_list_box">
  318. <h3 class="h3 tag">12</h3>
  319. <p class="p">大麦SAAS智能营销产品实践落地天空森林城市项目,产品帮助开发商充分溢价及销售,实现重庆</p>
  320. <p class="p">住宅毛坯单价第一,总销售额27亿+。同时大幅提升企业利润率,缩短项目销售周期。</p>
  321. </div>
  322. </li>
  323. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  324. <div class="section4_list_box">
  325. <h3 class="h3 tag">11</h3>
  326. <p class="p">与路劲集团形成战略合作</p>
  327. </div>
  328. </li>
  329. <li class="sec wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
  330. <div class="section4_list_box">
  331. <h3 class="h3 tag">07</h3>
  332. <p class="p">与深业集团形成战略合作</p>
  333. </div>
  334. </li>
  335. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  336. <div class="section4_list_box">
  337. <h3 class="h3 tag">02</h3>
  338. <p class="p">入驻大宁德必易园新办公地点</p>
  339. </div>
  340. </li>
  341. </ul>
  342. <ul class="section4_list">
  343. <li class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
  344. <div class="section4_list_box">
  345. <h3 class="h3 latest">20<br />16</h3>
  346. <!--<p class="p p1">NOW-B轮进行中</p>-->
  347. </div>
  348. </li>
  349. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  350. <div class="section4_list_box">
  351. <h3 class="h3 tag">12</h3>
  352. <p class="p">大麦SAAS智能营销系列产品-天空森林城市APP,正式上线</p>
  353. </div>
  354. </li>
  355. <li class="sec wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
  356. <div class="section4_list_box">
  357. <h3 class="h3 tag">09</h3>
  358. <p class="p">与易居中国、城视窗联合举办北京国际设计周-全球未来人居创新大会,本次大会邀请了全球100位建筑师进行作品中国首秀。</p>
  359. </div>
  360. <div class="section4_list_box">
  361. <div id="progressFirst" class="progress progressFirst">
  362. <p class="p_fir p_fir1 wow p_border">
  363. <img id="progressFirstImg" src="http://yun-image.elab-plus.com/images/Bitmap@2x9.png" alt="" class="wph">
  364. <span id="progressFirstText" class="fl">唯品会信息科技有限公司(VIPS)成立于2008年8月,2012年在美国纽约证券交易所(NYSE)上市。目前已成为中国第三大电商。</span>
  365. </p>
  366. </div>
  367. </div>
  368. </li>
  369. <li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  370. <div class="section4_list_box A_plus_invest">
  371. <h3 class="h3 tag">05</h3>
  372. <p class="p">完成A+轮融资,以3.3亿估值,再获数千万融资额。</p>
  373. <p class="p">战略投资方:<span id="A_plus_invest_shun" style="font-weight: bold">顺为资本</span>/<span id="A_plus_invest_wph" style="font-weight: bold">唯品基金</span></p>
  374. </div>
  375. </li>
  376. </ul>
  377. <ul class="section4_list section4_list01">
  378. <li class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
  379. <div class="section4_list_box">
  380. <h3 class="h3 latest">20<br />15</h3>
  381. <!--<p class="p p1 p1-1">NOW-B轮进行中</p>-->
  382. </div>
  383. <div class="section4_list_box">
  384. <div id="progressSecond" class="progressSecond progress">
  385. <p class="p_fir p_border">
  386. <img id="progressSecondImg" src="http://yun-image.elab-plus.com/images/Bitmap@2x.png" alt="" class="shun">
  387. <span id="progressSecondText" class="fl">顺为资本由雷军和许达来先生联合创立,重点关注互联网,高科技行业以及互联网与传统行业结合所带来的变革。已主导投资了超百家创业公司。</span>
  388. </p>
  389. </div>
  390. </div>
  391. </li>
  392. <li class="wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
  393. <div class="section4_list_box A_invest">
  394. <h3 class="h3 tag">10</h3>
  395. <p class="p">完成A轮融资,以1.5亿估值,获得数千万融资额。战略投资方:<span id="A_invest_shun" style="font-weight: bold">顺为资本</span>/<span id="A_invest_wph" style="font-weight: bold">唯品基金</span></p>
  396. <p class="p">未来人居1号作品-天空森林城市项目落地重庆</p>
  397. </div>
  398. </li>
  399. <li class="sec wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  400. <div class="section4_list_box">
  401. <h3 class="h3 tag">07</h3>
  402. <p class="p">公司成立,入驻宏慧音悦湾办公空间。</p>
  403. </div>
  404. </li>
  405. </ul>
  406. <div class="progress" id="progreeBtn" hidden>
  407. <!--<img src="http://yun-image.elab-plus.com/images/Line.png" alt="" class="Line wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">-->
  408. <p class="p_fir wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  409. <img src="http://yun-image.elab-plus.com/images/Bitmap@2x.png" alt="" class="shun">
  410. <span class="fl">顺为资本由雷军和许达来先生联合创立,重点关注互联网,高科技行业以及互联网与传统行业结合所带来的变革。已主导投资了超百家创业公司。</span>
  411. </p>
  412. <p class="p_fir p_fir1 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s" style="">
  413. <img src="http://yun-image.elab-plus.com/images/Bitmap@2x9.png" alt="" class="wph">
  414. <span class="fl">唯品会信息科技有限公司(VIPS)成立于2008年8月,2012年在美国纽约证券交易所(NYSE)上市。目前已成为中国第三大电商。</span>
  415. </p>
  416. </div>
  417. </div>
  418. <p>&nbsp;</p>
  419. <a href="javascript:showTimeMore();" id='btnShowTimeMore' class="more wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">查看更多</a>
  420. <p>&nbsp;</p>
  421. </div>
  422. <div class="section5">
  423. <div class="wrap hj_box">
  424. <div class="swiper">
  425. <div class="swiper-wrapper">
  426. <div class="swiper-slide"><img src="images/slider/1.jpg" /></div>
  427. <div class="swiper-slide"><img src="images/slider/2.jpg" /></div>
  428. <div class="swiper-slide"><img src="images/slider/3.jpg" /></div>
  429. <div class="swiper-slide"><img src="images/slider/4.jpg" /></div>
  430. <div class="swiper-slide"><img src="images/slider/5.jpg" /></div>
  431. <div class="swiper-slide"><img src="images/slider/7.jpg" /></div>
  432. <div class="swiper-slide"><img src="images/slider/8.jpg" /></div>
  433. <div class="swiper-slide"><img src="images/slider/9.jpg" /></div>
  434. </div>
  435. </div>
  436. <div class="a_btn clearfix">
  437. <a href="javascript:subShowJoin();" class="more1 wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.5s">加入我们</a>
  438. <a id="video_btn_join"href="javascript:;" class="more2 wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.5s">查看视频</a>
  439. </div>
  440. <video id="video_ted" style="display: none" controls preload="auto" width="400px" height="300px">
  441. <source src="http://yun-image.elab-plus.com/video/Elab Final(蔡总创业TED演讲).mp4" type="video/mp4">
  442. </video>
  443. <video id="video_join" style="display: none" controls preload="auto" width="400px" height="300px">
  444. <source src="http://yun-image.elab-plus.com/video/加入我们-公司环境视频.mp4" type="video/mp4">
  445. </video>
  446. </div>
  447. </div>
  448. </div>
  449. </body>
  450. <!--<script src="js/index.js"></script>-->
  451. <script src="js/wow.js"></script>
  452. <!--<script src="js/debug.js"></script>-->
  453. <script>
  454. var $_w,myswiper;
  455. var markIdx = 0;
  456. var currentIdx = 0;
  457. var lastIdx = 0;
  458. $(function() {
  459. <!-- menu hover start-->
  460. $('.elab_who').hover(function () {
  461. currentIdx = 1;
  462. // $(".elab_who").css("opacity","1");
  463. // $(".elab_who").removeClass("animate_fadeIn");
  464. // $(".elab_what").removeClass("animate_fadeIn");
  465. // $(".elab_news").removeClass("animate_fadeIn");
  466. // $(".elab_project").removeClass("animate_fadeIn");
  467. // $(".elab_contact").removeClass("animate_fadeIn");
  468. //
  469. // $(".elab_what").addClass("animate_fadeOut");
  470. // $(".elab_news").addClass("animate_fadeOut");
  471. // $(".elab_project").addClass("animate_fadeOut");
  472. // $(".elab_contact").addClass("animate_fadeOut");
  473. },function () {
  474. currentIdx = 0;
  475. // $(".elab_who").css("opacity","1");
  476. //
  477. // $(".elab_who").removeClass("animate_fadeOut");
  478. // $(".elab_what").removeClass("animate_fadeOut");
  479. // $(".elab_news").removeClass("animate_fadeOut");
  480. // $(".elab_project").removeClass("animate_fadeOut");
  481. // $(".elab_contact").removeClass("animate_fadeOut");
  482. // $(".elab_what").addClass("animate_fadeIn");
  483. // $(".elab_news").addClass("animate_fadeIn");
  484. // $(".elab_project").addClass("animate_fadeIn");
  485. // $(".elab_contact").addClass("animate_fadeIn");
  486. });
  487. $('.elab_what').hover(function () {
  488. currentIdx = 2;
  489. // $(".elab_what").css("opacity","1");
  490. // $(".elab_who").removeClass("animate_fadeIn");
  491. // $(".elab_what").removeClass("animate_fadeIn");
  492. // $(".elab_news").removeClass("animate_fadeIn");
  493. // $(".elab_project").removeClass("animate_fadeIn");
  494. // $(".elab_contact").removeClass("animate_fadeIn");
  495. },function () {
  496. currentIdx = 0;
  497. /* $(".elab_what").css("opacity","1");
  498. $(".elab_who").removeClass("animate_fadeOut");
  499. $(".elab_what").removeClass("animate_fadeOut");
  500. $(".elab_news").removeClass("animate_fadeOut");
  501. $(".elab_project").removeClass("animate_fadeOut");
  502. $(".elab_contact").removeClass("animate_fadeOut");*/
  503. // $(".elab_who").addClass("animate_fadeIn");
  504. // $(".elab_news").addClass("animate_fadeIn");
  505. // $(".elab_project").addClass("animate_fadeIn");
  506. // $(".elab_contact").addClass("animate_fadeIn");
  507. });
  508. $('.elab_news').hover(function () {
  509. currentIdx = 3;
  510. /*$(".elab_news").css("opacity","1");
  511. $(".elab_who").removeClass("animate_fadeIn");
  512. $(".elab_what").removeClass("animate_fadeIn");
  513. $(".elab_news").removeClass("animate_fadeIn");
  514. $(".elab_project").removeClass("animate_fadeIn");
  515. $(".elab_contact").removeClass("animate_fadeIn");*/
  516. },function () {
  517. currentIdx = 0;
  518. /*$(".elab_news").css("opacity","1");
  519. $(".elab_who").removeClass("animate_fadeOut");
  520. $(".elab_what").removeClass("animate_fadeOut");
  521. $(".elab_news").removeClass("animate_fadeOut");
  522. $(".elab_project").removeClass("animate_fadeOut");
  523. $(".elab_contact").removeClass("animate_fadeOut");*/
  524. // $(".elab_who").addClass("animate_fadeIn");
  525. // $(".elab_what").addClass("animate_fadeIn");
  526. // $(".elab_project").addClass("animate_fadeIn");
  527. // $(".elab_contact").addClass("animate_fadeIn");
  528. });
  529. $('.elab_project').hover(function () {
  530. currentIdx = 4;
  531. /*$(".elab_project").css("opacity","1");
  532. $(".elab_who").removeClass("animate_fadeIn");
  533. $(".elab_what").removeClass("animate_fadeIn");
  534. $(".elab_news").removeClass("animate_fadeIn");
  535. $(".elab_project").removeClass("animate_fadeIn");
  536. $(".elab_contact").removeClass("animate_fadeIn");
  537. $(".elab_who").addClass("animate_fadeOut");
  538. $(".elab_what").addClass("animate_fadeOut");
  539. $(".elab_news").addClass("animate_fadeOut");
  540. $(".elab_contact").addClass("animate_fadeOut");*/
  541. },function () {
  542. currentIdx = 0;
  543. /*$(".elab_project").css("opacity","1");
  544. $(".elab_who").removeClass("animate_fadeOut");
  545. $(".elab_what").removeClass("animate_fadeOut");
  546. $(".elab_news").removeClass("animate_fadeOut");
  547. $(".elab_project").removeClass("animate_fadeOut");
  548. $(".elab_contact").removeClass("animate_fadeOut");
  549. $(".elab_who").addClass("animate_fadeIn");
  550. $(".elab_what").addClass("animate_fadeIn");
  551. $(".elab_news").addClass("animate_fadeIn");
  552. $(".elab_contact").addClass("animate_fadeIn");*/
  553. });
  554. $('.elab_contact').hover(function () {
  555. currentIdx = 5;
  556. /*$(".elab_contact").css("opacity","1");
  557. $(".elab_who").removeClass("animate_fadeIn");
  558. $(".elab_what").removeClass("animate_fadeIn");
  559. $(".elab_news").removeClass("animate_fadeIn");
  560. $(".elab_project").removeClass("animate_fadeIn");
  561. $(".elab_contact").removeClass("animate_fadeIn");
  562. $(".elab_who").addClass("animate_fadeOut");
  563. $(".elab_what").addClass("animate_fadeOut");
  564. $(".elab_news").addClass("animate_fadeOut");
  565. $(".elab_project").addClass("animate_fadeOut");*/
  566. },function () {
  567. currentIdx = 0;
  568. /* $(".elab_contact").css("opacity","1");
  569. $(".elab_who").removeClass("animate_fadeOut");
  570. $(".elab_what").removeClass("animate_fadeOut");
  571. $(".elab_news").removeClass("animate_fadeOut");
  572. $(".elab_project").removeClass("animate_fadeOut");
  573. $(".elab_contact").removeClass("animate_fadeOut");
  574. $(".elab_who").addClass("animate_fadeIn");
  575. $(".elab_what").addClass("animate_fadeIn");
  576. $(".elab_news").addClass("animate_fadeIn");
  577. $(".elab_project").addClass("animate_fadeIn");*/
  578. });
  579. <!-- menu hover end -->
  580. <!--mouse over listener start-->
  581. <!--mouse over listener end-->
  582. setInterval(function () {
  583. if(markIdx !== currentIdx){
  584. markIdx = currentIdx;
  585. var link = '';
  586. var empty = true;
  587. switch (markIdx) {
  588. case 0:
  589. link = '';
  590. empty = true;
  591. break;
  592. case 1:
  593. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
  594. empty = false;
  595. break;
  596. case 2:
  597. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
  598. empty = false;
  599. break;
  600. case 3:
  601. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
  602. empty = false;
  603. break;
  604. case 4:
  605. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
  606. empty = false;
  607. break;
  608. case 5:
  609. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
  610. empty = false;
  611. break;
  612. }
  613. if(empty){
  614. $(".menu-background").fadeOut(400,function () {
  615. $(".menu-background").css('background-image',link);
  616. });
  617. }else {
  618. if(lastIdx!==0){
  619. $(".menu-background").fadeOut(400,function () {
  620. $(".menu-background").css('background-image',link);
  621. $(".menu-background").fadeIn(800);
  622. })
  623. }else {
  624. $(".menu-background").css('background-image',link);
  625. $(".menu-background").fadeIn(800);
  626. }
  627. }
  628. lastIdx = markIdx;
  629. }
  630. },1210);
  631. $_w = $(top).width()*0.9;
  632. //alert($_w);
  633. $(".swiper").width($_w+"px");
  634. myswiper = new Swiper('.swiper', {
  635. pagination: '.span',
  636. paginationClickable: true,
  637. autoplay: 3000,
  638. speed: 800,
  639. loop: true
  640. });
  641. $("#progressFirst").attr("style", "opacity:0");
  642. $('#progressSecond').attr("style", "opacity:0");
  643. //show menu
  644. $(".menu").on("click", function(e) {
  645. $(".main-menu").addClass("active");
  646. });
  647. //close menu
  648. $('.menu-close').on('click', function(e) {
  649. $(".main-menu").removeClass("active");
  650. });
  651. //hover style
  652. $(".what-we-do").on('mouseover mouseout', function(e) {
  653. $(".footer .right,#rightWave").toggleClass("active");
  654. });
  655. $(".what-we-do").on('mouseover', function(e) {
  656. $(".footer .right,#rightWave").addClass("active");
  657. $(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
  658. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
  659. });
  660. $(".what-we-do").on('mouseout', function(e) {
  661. //setTimeout(function(){
  662. $(".footer .right,#rightWave").removeClass("active");
  663. $(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
  664. $("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
  665. //},600);
  666. });
  667. var callback = function() {
  668. isAInAnimation = false;
  669. isAplusInAnimation = false;
  670. };
  671. var isAInAnimation = false;
  672. $('#A_invest_shun').on('mouseover', function(e) {
  673. $("#progressSecondImg").removeClass('wph');
  674. $("#progressSecondImg").addClass('shun');
  675. $("#progressSecondImg").attr('src', 'http://yun-image.elab-plus.com/images/Bitmap@2x.png');
  676. $("#progressSecondText").text('顺为资本由雷军和许达来先生联合创立,重点关注互联网,高科技行业以及互联网与传统行业结合所带来的变革。已主导投资了超百家创业公司。');
  677. $("#progressSecondText").attr("style", "width:80%;");
  678. $('#progressSecond').fadeTo('normal', 1);
  679. if(!isAInAnimation) {
  680. isAInAnimation = true;
  681. $('#progressSecond').fadeTo('normal', 1, callback);
  682. }
  683. });
  684. $('#A_invest_wph').on('mouseover', function(e) {
  685. $("#progressSecondImg").removeClass('shun');
  686. $("#progressSecondImg").addClass('wph');
  687. $("#progressSecondImg").attr('src', 'http://yun-image.elab-plus.com/images/Bitmap@2x9.png');
  688. $("#progressSecondText").text('唯品会信息科技有限公司(VIPS)成立于2008年8月,2012年在美国纽约证券交易所(NYSE)上市。目前已成为中国第三大电商。');
  689. $("#progressSecondText").attr("style", "width:60%;");
  690. $("#progressSecond").fadeTo('normal', 1);
  691. if(!isAInAnimation) {
  692. isAInAnimation = true;
  693. $("#progressSecond").fadeTo('normal', 1, callback);
  694. }
  695. });
  696. $('#A_invest_shun').on('mouseout', function(e) {
  697. if(!isAInAnimation)
  698. $('#progressSecond').fadeTo('normal', 0, callback);
  699. });
  700. $('#A_invest_wph').on('mouseout', function(e) {
  701. if(!isAInAnimation)
  702. $('#progressSecond').fadeTo('normal', 0, callback);
  703. });
  704. var isAplusInAnimation = false;
  705. $('#A_plus_invest_shun').on('mouseover', function(e) {
  706. $("#progressFirstImg").removeClass('wph');
  707. $("#progressFirstImg").addClass('shun');
  708. $("#progressFirstImg").attr('src', 'http://yun-image.elab-plus.com/images/Bitmap@2x.png');
  709. $("#progressFirstText").text('顺为资本由雷军和许达来先生联合创立,重点关注互联网,高科技行业以及互联网与传统行业结合所带来的变革。已主导投资了超百家创业公司。');
  710. $("#progressFirstText").attr("style", "width:80%;");
  711. $("#progressFirst").fadeTo('normal', 1);
  712. if(!isAplusInAnimation) {
  713. isAplusInAnimation = true;
  714. $("#progressFirst").fadeTo('normal', 1, callback);
  715. }
  716. });
  717. $('#A_plus_invest_wph').on('mouseover', function(e) {
  718. $("#progressFirstImg").removeClass('shun');
  719. $("#progressFirstImg").addClass('wph');
  720. $("#progressFirstImg").attr('src', 'http://yun-image.elab-plus.com/images/Bitmap@2x9.png');
  721. $("#progressFirstText").text('唯品会信息科技有限公司(VIPS)成立于2008年8月,2012年在美国纽约证券交易所(NYSE)上市。目前已成为中国第三大电商。');
  722. $("#progressFirstText").attr("style", "width:60%");
  723. $("#progressFirst").fadeTo('normal', 1);
  724. if(!isAplusInAnimation) {
  725. isAplusInAnimation = true;
  726. $("#progressFirst").fadeTo('normal', 1, callback);
  727. }
  728. });
  729. $('#A_plus_invest_shun').on('mouseout', function(e) {
  730. if(!isAplusInAnimation)
  731. $("#progressFirst").fadeTo('normal', 0, callback);
  732. });
  733. $('#A_plus_invest_wph').on('mouseout', function(e) {
  734. if(!isAplusInAnimation)
  735. $("#progressFirst").fadeTo('normal', 0, callback);
  736. });
  737. $('#video_btn_ted').on('click', function(){
  738. layer.open({
  739. type: 1,
  740. title: false,
  741. shade:0.6,
  742. closeBtn: 0,
  743. area:['400px', '300px'],
  744. shadeClose: true,
  745. content: $('#video_ted')
  746. });
  747. });
  748. $('#video_btn_join').on('click', function(){
  749. layer.open({
  750. type: 1,
  751. title: false,
  752. shade:0.6,
  753. closeBtn: 0,
  754. area:['400px', '300px'],
  755. shadeClose: true,
  756. content: $('#video_join')
  757. });
  758. });
  759. });
  760. window.onresize = function(){
  761. $_w = $(top).width()*0.9;
  762. //alert($_w);
  763. $(".swiper").width($_w+"px");
  764. var sindex = myswiper.realIndex;
  765. console.log("the licheng slider sindex is: "+sindex);
  766. myswiper = new Swiper('.swiper', {
  767. initialSlide: sindex,
  768. pagination: '.span',
  769. paginationClickable: true,
  770. autoplay: 3000,
  771. speed: 800,
  772. loop: true
  773. });
  774. }
  775. function startWow() {
  776. //start wow
  777. var wow = new WOW({
  778. boxClass: 'wow',
  779. animateClass: 'animated',
  780. offset: 0,
  781. mobile: true,
  782. live: true
  783. });
  784. wow.init();
  785. }
  786. function subShowJoin() {
  787. parent.showCareers();
  788. }
  789. function innerShowPro() {
  790. parent.showProjects();
  791. }
  792. function showTimeMore() {
  793. var $_class = $(".hideTimeLine").attr('class');
  794. if($_class.indexOf("show") > -1) {
  795. $("#btnShowTimeMore").text("查看更多");
  796. } else {
  797. $("#btnShowTimeMore").text("返 回");
  798. }
  799. $(".hideTimeLine").toggleClass("show").slideToggle(2000);
  800. }
  801. function linkToInner(url) {
  802. $('html body').fadeOut(500);
  803. setTimeout(function() {
  804. self.location.href = url + "?v=" + Math.random();
  805. }, 500);
  806. }
  807. </script>
  808. </html>