<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<meta content='width=device-width, initial-scale=1.0,user-scalable=no' name='viewport'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>PROJECTS | ELAB</title>
<link href="css/reset.css" rel="stylesheet"></link>
<link href="css/style.css?v=0.346785347683" rel="stylesheet"></link>
<link href="css/animate.min.css" rel="stylesheet"></link>
<style type="text/css">
html,
body {
height: auto;
min-height: 100%;
background: #1b2030;
}
#projects {
width: 100%;
height: auto;
background: #1b2030;
max-width: none;
overflow-x: hidden;
overflow-y: auto;
}
.slide-line, .slide-line1 {
background: #fff;
}
</style>
</head>
<body>
<div class="page" id="projects">
<!--top menu-->
<div class="top-menu wow fadeInDown" data-wow-delay="1s" data-wow-duration="1s">
<div class="logo">
<a href="javascript:parent.showIndex();"><img class="inner-icon"
src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png"/></a>
</div>
<div class="menu"><img class="inner-icon"
src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png"/></div>
<div class="cases"><a href="javascript:void(0);"><img class="inner-icon"
src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png"/></a>
</div>
</div>
<!--main menu-->
<div class="main-menu">
<div class="menu-background"></div>
<!--contact us-->
<div class="menu-contact">
<div class="menu-contact-list">
<div class="menu-contact-map">
<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">
<div class="map-icon">
<img class="map-img" src="https://dm.static.elab-plus.com/elabGuanWang/Location@2x.png">
</div>
<div class="map-address">
<p>地址</p>
</div>
<div class="map-desc">
<p>上海市静安区彭江路602号E座408室</p>
</div>
</a>
</div>
<div class="menu-contact-phone">
<div class="phone-icon">
<img class="phone-img" src="https://dm.static.elab-plus.com/elabGuanWang/Phone@2x.png">
</div>
<div class="phone-address">
<p>电话</p>
</div>
<div class="phone-desc">
<p><a href="tel:02156519508">021-56519508</a></p>
</div>
</div>
<div class="menu-contact-mail">
<div class="email-icon">
<img class="email-img" src="https://dm.static.elab-plus.com/elabGuanWang/Email@2x.png">
</div>
<div class="email-address">
<p>邮件</p>
</div>
<div class="email-desc">
<p><a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a></p>
</div>
</div>
</div>
</div>
<!--CONTACT US-->
<div class="menu-close"></div>
<ul class="menu-list">
<li class="elab_who">
<a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showWho();">ELAB是谁
<small>WHO IS ELAB</small>
</a>
</li>
<li class="elab_what">
<a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showDo();">ELAB在做什么
<small>WHAT ELAB DO</small>
</a>
</li>
<li class="elab_news">
<a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showNews();">新闻中心
<small>NEWS</small>
</a>
</li>
<li class="elab_project">
<a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showProjects();">作品案例
<small>PROJECTS</small>
</a>
</li>
<li class="elab_contact">
<a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showCareers();">加入我们
<small>CAREERS</small>
</a>
</li>
<!--<li>-->
<!--<a href="javascript:$('.main-menu').removeClass('active');parent.closeProjects();parent.showContact();">联系我们-->
<!--<small>CONTACTS</small>-->
<!--</a>-->
<!--</li>-->
</ul>
</div>
<div class="who-we-are wow fadeInUpIndex" data-wow-delay="2s" data-wow-duration="1s">
<p>
<a href="javascript:parent.closeProjects();parent.showWho();">我们是谁</a>
</p>
<div class="slide-line"></div>
<div class="slide-line1"></div>
</div>
<div class="what-we-do wow fadeInUpIndex1" data-wow-delay="2s" data-wow-duration="1s">
<p>
<a href="javascript:parent.closeProjects();parent.showDo();">我们在做什么</a>
</p>
<div class="slide-line"></div>
<div class="slide-line1"></div>
</div>
<!--main-->
<div class="project-list"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/wow.js"></script>
<script>
var markIdx = 0;
var currentIdx = 0;
var lastIdx = 0;
$(function () {
<!-- menu hover start-->
$('.elab_who').hover(function () {
currentIdx = 1;
// $(".elab_who").css("opacity","1");
// $(".elab_who").removeClass("animate_fadeIn");
// $(".elab_what").removeClass("animate_fadeIn");
// $(".elab_news").removeClass("animate_fadeIn");
// $(".elab_project").removeClass("animate_fadeIn");
// $(".elab_contact").removeClass("animate_fadeIn");
//
// $(".elab_what").addClass("animate_fadeOut");
// $(".elab_news").addClass("animate_fadeOut");
// $(".elab_project").addClass("animate_fadeOut");
// $(".elab_contact").addClass("animate_fadeOut");
},function () {
currentIdx = 0;
// $(".elab_who").css("opacity","1");
//
// $(".elab_who").removeClass("animate_fadeOut");
// $(".elab_what").removeClass("animate_fadeOut");
// $(".elab_news").removeClass("animate_fadeOut");
// $(".elab_project").removeClass("animate_fadeOut");
// $(".elab_contact").removeClass("animate_fadeOut");
// $(".elab_what").addClass("animate_fadeIn");
// $(".elab_news").addClass("animate_fadeIn");
// $(".elab_project").addClass("animate_fadeIn");
// $(".elab_contact").addClass("animate_fadeIn");
});
$('.elab_what').hover(function () {
currentIdx = 2;
// $(".elab_what").css("opacity","1");
// $(".elab_who").removeClass("animate_fadeIn");
// $(".elab_what").removeClass("animate_fadeIn");
// $(".elab_news").removeClass("animate_fadeIn");
// $(".elab_project").removeClass("animate_fadeIn");
// $(".elab_contact").removeClass("animate_fadeIn");
},function () {
currentIdx = 0;
/* $(".elab_what").css("opacity","1");
$(".elab_who").removeClass("animate_fadeOut");
$(".elab_what").removeClass("animate_fadeOut");
$(".elab_news").removeClass("animate_fadeOut");
$(".elab_project").removeClass("animate_fadeOut");
$(".elab_contact").removeClass("animate_fadeOut");*/
// $(".elab_who").addClass("animate_fadeIn");
// $(".elab_news").addClass("animate_fadeIn");
// $(".elab_project").addClass("animate_fadeIn");
// $(".elab_contact").addClass("animate_fadeIn");
});
$('.elab_news').hover(function () {
currentIdx = 3;
/*$(".elab_news").css("opacity","1");
$(".elab_who").removeClass("animate_fadeIn");
$(".elab_what").removeClass("animate_fadeIn");
$(".elab_news").removeClass("animate_fadeIn");
$(".elab_project").removeClass("animate_fadeIn");
$(".elab_contact").removeClass("animate_fadeIn");*/
},function () {
currentIdx = 0;
/*$(".elab_news").css("opacity","1");
$(".elab_who").removeClass("animate_fadeOut");
$(".elab_what").removeClass("animate_fadeOut");
$(".elab_news").removeClass("animate_fadeOut");
$(".elab_project").removeClass("animate_fadeOut");
$(".elab_contact").removeClass("animate_fadeOut");*/
// $(".elab_who").addClass("animate_fadeIn");
// $(".elab_what").addClass("animate_fadeIn");
// $(".elab_project").addClass("animate_fadeIn");
// $(".elab_contact").addClass("animate_fadeIn");
});
$('.elab_project').hover(function () {
currentIdx = 4;
/*$(".elab_project").css("opacity","1");
$(".elab_who").removeClass("animate_fadeIn");
$(".elab_what").removeClass("animate_fadeIn");
$(".elab_news").removeClass("animate_fadeIn");
$(".elab_project").removeClass("animate_fadeIn");
$(".elab_contact").removeClass("animate_fadeIn");
$(".elab_who").addClass("animate_fadeOut");
$(".elab_what").addClass("animate_fadeOut");
$(".elab_news").addClass("animate_fadeOut");
$(".elab_contact").addClass("animate_fadeOut");*/
},function () {
currentIdx = 0;
/*$(".elab_project").css("opacity","1");
$(".elab_who").removeClass("animate_fadeOut");
$(".elab_what").removeClass("animate_fadeOut");
$(".elab_news").removeClass("animate_fadeOut");
$(".elab_project").removeClass("animate_fadeOut");
$(".elab_contact").removeClass("animate_fadeOut");
$(".elab_who").addClass("animate_fadeIn");
$(".elab_what").addClass("animate_fadeIn");
$(".elab_news").addClass("animate_fadeIn");
$(".elab_contact").addClass("animate_fadeIn");*/
});
$('.elab_contact').hover(function () {
currentIdx = 5;
/*$(".elab_contact").css("opacity","1");
$(".elab_who").removeClass("animate_fadeIn");
$(".elab_what").removeClass("animate_fadeIn");
$(".elab_news").removeClass("animate_fadeIn");
$(".elab_project").removeClass("animate_fadeIn");
$(".elab_contact").removeClass("animate_fadeIn");
$(".elab_who").addClass("animate_fadeOut");
$(".elab_what").addClass("animate_fadeOut");
$(".elab_news").addClass("animate_fadeOut");
$(".elab_project").addClass("animate_fadeOut");*/
},function () {
currentIdx = 0;
/* $(".elab_contact").css("opacity","1");
$(".elab_who").removeClass("animate_fadeOut");
$(".elab_what").removeClass("animate_fadeOut");
$(".elab_news").removeClass("animate_fadeOut");
$(".elab_project").removeClass("animate_fadeOut");
$(".elab_contact").removeClass("animate_fadeOut");
$(".elab_who").addClass("animate_fadeIn");
$(".elab_what").addClass("animate_fadeIn");
$(".elab_news").addClass("animate_fadeIn");
$(".elab_project").addClass("animate_fadeIn");*/
});
<!-- menu hover end -->
<!--mouse over listener start-->
<!--mouse over listener end-->
setInterval(function () {
if(markIdx !== currentIdx){
markIdx = currentIdx;
var link = '';
var empty = true;
switch (markIdx) {
case 0:
link = '';
empty = true;
break;
case 1:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
empty = false;
break;
case 2:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
empty = false;
break;
case 3:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
empty = false;
break;
case 4:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
empty = false;
break;
case 5:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
empty = false;
break;
}
if(empty){
$(".menu-background").fadeOut(400,function () {
$(".menu-background").css('background-image',link);
});
}else {
if(lastIdx!==0){
$(".menu-background").fadeOut(400,function () {
$(".menu-background").css('background-image',link);
$(".menu-background").fadeIn(800);
})
}else {
$(".menu-background").css('background-image',link);
$(".menu-background").fadeIn(800);
}
}
lastIdx = markIdx;
}
},1210);
//show menu
$(".menu").on("click", function (e) {
$(".main-menu").addClass("active");
});
//close menu
$('.menu-close').on('click', function (e) {
$(".main-menu").removeClass("active");
});
//hover style
$(".who-we-are").on('mouseover', function (e) {
$(".footer .left,#leftWave").addClass("active");
$(".who-we-are .slide-line,.who-we-are .slide-line1").addClass("active");
});
$(".who-we-are").on('mouseout', function (e) {
$(".footer .left,#leftWave").removeClass("active");
$(".who-we-are .slide-line,.who-we-are .slide-line1").removeClass("active").addClass("fadeInUp");
});
$(".what-we-do").on('mouseover', function (e) {
$(".footer .right,#rightWave").addClass("active");
$(".what-we-do .slide-line,.what-we-do .slide-line1").addClass("active");
$("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_5.png");
});
$(".what-we-do").on('mouseout', function (e) {
//setTimeout(function(){
$(".footer .right,#rightWave").removeClass("active");
$(".what-we-do .slide-line,.what-we-do .slide-line1").removeClass("active").addClass("fadeInUp");
$("#menuLayer .cases img").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
//},600);
});
//读取分类数据
$.get("http://106.14.225.13:8081/rest/listCategory1", function (result) {
console.log(result);
var $_list = result.result.list;
var host = "";
if ($_list.length > 0) {
$(".project-list").empty();//清空demo
for (var i = 0; i < $_list.length; i++) {
var tmp = $_list[i];
var $_t = 0.1;
if (i < 2) {
$_t = (1 + i) * 0.2;
}
console.log($_t);
var $_img = (host + tmp['image1']) || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
var $_html = `<div class="project-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
<img class="inner-icon" src="${$_img}" />
<div class="item-desc item-inner"><span>${tmp['textTitle']}</span></div>
<div class="item-title item-inner">${tmp['textCn']}<p>${tmp['textEn']}</p></div>
<div class="item-link item-inner"><a href="javascript:parent.showList(${tmp['id']})" target="_self">浏览作品</a></div>
</div>`;
$(".project-list").append($_html);
}
}
});
});
function startWow() {
//start wow
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 100,
mobile: true,
live: true
});
wow.init();
}
function menuShowProjects() {
top.closeAndShowPro('projectsLayer');
}
</script>
</body>
</html>