<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>NEWS CENTER</title>
<link href="css/reset.css" rel="stylesheet"/>
<link href="css/style.css?v=0.346785347683" rel="stylesheet"/>
<link href="css/animate.min.css" rel="stylesheet"/>
<style type="text/css">
html,
body {
height: auto;
min-height: 100%;
background: #2C2E34;
}
#projects {
width: 100%;
height: auto;
background: #2C2E34;
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-news wow fadeInDown" data-wow-delay="1s" data-wow-duration="1s">
<div class="logo">
<a href="javascript:parent.showIndex();"><img class="inner-icon inner-main"
src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png"/></a>
</div>
<div class="menu"><img class="inner-icon inner-menu"
src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png"/></div>
<div class="cases"><a href="javascript:parent.closeNews();parent.showProjects();"><img class="inner-icon inner-artcle"
src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png"/></a>
</div>
</div>
<!--footer news-footer-->
<div class="news-footer">
<div class="mobile-hide news-left">Copyright©2015-2018, elab-plus.com. All rights reserved. | 沪ICP备15047801号-1</div>
<div class="mobile-hide news-right">上海定卓⽹络科技有限公司 电话：021-50753278 地址：上海市静安区彭江路602号E座408室</div>
<div class="mobile-display news-left" style="visibility: hidden;">Copyright©2015-2018 | 沪ICP备15047801号-1</div>
</div>
<!--main menu-->
<div class="main-menu-news">
<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-news"></div>
<ul class="menu-list">
<li class="elab_who">
<a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showWho();">ELAB是谁
<small>WHO IS ELAB</small>
</a>
</li>
<li class="elab_what">
<a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showDo();">ELAB做什么
<small>WHAT ELAB DO</small>
</a>
</li>
<li class="elab_news">
<a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showNews();">新闻中心
<small>NEWS</small>
</a>
</li>
<li class="elab_project">
<a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showProjects();">作品案例
<small>PROJECTS</small>
</a>
</li>
<li class="elab_contact">
<a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showCareers();">加入我们
<small>CAREERS</small>
</a>
</li>
</ul>
</div>
<!--main-->
<div class="news_narrow">
<img class="news_tab_img" src = "https://dm.static.elab-plus.com/elabGuanWang/List@2x.png"/>
</div>
<div class="news-detail" id="iframeParent">
<!--<div class="article-close" id="articleCloseBtn"></div>-->
<!--<iframe frameborder="0" height="100%" scrolling="yes" name="newsIframe" class="news-iframe" width="100%"></iframe>-->
</div>
<div class="news-body">
<div class="news-list"></div>
<div class="news-sample-list"></div>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/wow.js"></script>
<script>
var btnChange = false;
var iframeShow =false;
// var itemFocus = false;
var markIdx = 0;
var currentIdx = 0;
var lastIdx = 0;
var menuList = ["elab_who","elab_what","elab_news","elab_project","elab_contact"];
var lastClassName ='';
var lineUrl = null;
var item = null;
var articleCloseBtn;
var iframeHtml;
$(function () {
$("news-body").on("touchmove",(e)=>{
if(iframeShow){
e.preventDefault();
}
});
//show menu
$(".menu").on("click", function (e) {
$(".main-menu-news").addClass("active");
});
//close menu
$('.menu-close-news').on('click', function (e) {
$(".main-menu-news").removeClass("active");
});
$('.news-detail').on('click', function (e) {
$(".news-detail").removeClass("active");
iframeShow = false;
lineUrl = "";
item = "";
$(".inner-main").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png");
$(".inner-menu").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png");
$(".inner-artcle").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png");
$(".top-menu-news").css("background-color","#2C2E34");
// var parentDiv = document.getElementById("iframeParent");
$("#iframeParent").empty();
});
<!-- 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;
// [".elab_who",".elab_what",".elab_news",".elab_project",".elab_contact"]
var currentClassName = '';
switch (markIdx) {
case 0:
link = '';
empty = true;
currentClassName = "";
break;
case 1:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
empty = false;
currentClassName = "elab_who";
break;
case 2:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
empty = false;
currentClassName = "elab_what";
break;
case 3:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
empty = false;
currentClassName = "elab_news";
break;
case 4:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
empty = false;
currentClassName = "elab_project";
break;
case 5:
link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
empty = false;
currentClassName = "elab_contact";
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;
lastClassName = currentClassName;
}
},1210);
var $_list;
var $_listV;
// 192.168.0.16
//读取分类数据 106.14.225.13
$.get("http://106.14.225.13:8081/rest/listNews", function (result) {
console.log("Result Data:" + JSON.stringify(result.result));
window.newsList = result.result;
$_list = result.result;
$_listV = result.result;
handleModuleShow();
});
/**
* 网格显示
* */
function handleModuleShow() {
if ($_list.length > 0) {
$(".news-list").empty();//清空demo $_list.length
for (var i = 0; i < $_list.length; i+=3) {
var tmp0 = $_list[i];
var tmp1 = $_list[i+1];
var tmp2 = $_list[i+2];
var $_t = 0.1;
if (i < 2) {
$_t = (1 + i) * 0.2;
}
console.log($_t);
// console.log('$_img:' + $_img);
var $_html = '';
if (tmp0 && tmp1 && tmp2) {
var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
var $_img1 = tmp1['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
var $_img2 = tmp2['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
var data0 = new Date(tmp0['created']);
console.log("tmp0['created']:"+tmp0['created']);
console.log("data0:"+data0.getFullYear());
console.log("data0:"+data0.getMonth());
console.log("data0:"+data0.getDate());
var data1 = new Date(tmp1['created']);
var data2 = new Date(tmp2['created']);
$_html = `<div class="newsItem_1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i})" >
<img class="itemBg" src="${$_img0}"/>
<div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
<div class="item-title item-inner">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
<div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
</div>
<div class="newsBody">
<div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+1})">
<img class="itemBg" src="${$_img1}" />
<div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
<div class="item-title item-inner item-title-sub">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
<div class="item-time item-time-inner"><p>${data1.getFullYear()+'.'+(data1.getMonth()+1)+'.'+data1.getDate()}</p></div>
</div>
<div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+2})">
<img class="itemBg" src="${$_img2}" />
<div class="newsItem-mark item-inner"><a>${tmp2['tag']}</a></div>
<div class="item-title item-inner item-title-sub">${tmp2['title']}<p>${tmp2['subTitle']}</p></div>
<div class="item-time item-time-inner"><p>${data2.getFullYear()+'.'+(data2.getMonth()+1)+'.'+data2.getDate()}</p></div>
</div>
</div>
`;
}else if (tmp0 && tmp1 && !tmp2) {
var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
var $_img1 = tmp1['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
var data0 = new Date(tmp0['created']);
var data1 = new Date(tmp1['created']);
$_html = `
<div class="newsBody">
<div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i})">
<img class="itemBg" src="${$_img0}"/>
<div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
<div class="item-title item-inner item-title-sub">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
<div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
</div>
<div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+1})">
<img class="itemBg" src="${$_img1}" />
<div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
<div class="item-title item-inner item-title-sub">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
<div class="item-time item-time-inner"><p>${data1.getFullYear()+'.'+(data1.getMonth()+1)+'.'+data1.getDate()}</p></div>
</div>
</div>
`;
}else if(tmp0 && !tmp1 && !tmp2){
var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
var data0 = new Date(tmp0['created']);
$_html = `
<div class="newsBody">
<div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i}})">
<img class="itemBg" src="${$_img0}"/>
<div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
<div class="item-title item-inner item-title-sub">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
<div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
</div>
</div>
`;
}
$(".news-sample-list").append($_html);
}
}
}
/**
* 列表显示
* @param list
*/
function handleListShow() {
// var list = [];
console.log('handleListShow：'+JSON.stringify($_listV));
for(var i=0;i<$_listV.length;i+=2){
var item1 = $_listV[i];
var item2 = $_listV[i+1];
var $_t = (1 + i) * 0.2;
var $_html = '';
if(item2 && item1){
$_html = `<div class="news-list-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
<div class="news-list-item-left" onclick="turnToArticle(${i})">
<div class="news-list-item-box"><p>${item1['id']}</p></div>
<div class="news-list-item-description">
<div class="news-list-item-title"><p>${item1['title'].replace("<br>","")}</p></div>
<div class="news-list-item-bottom"></div>
</div>
</div>
<div class="news-list-item-right" onclick="turnToArticle(${i+1})">
<div class="news-list-item-box"><p>${item2['id']}</p></div>
<div class="news-list-item-description">
<div class="news-list-item-title"><p>${item2['title'].replace("<br>","")}</p></div>
<div class="news-list-item-bottom"></div>
</div>
</div>
</div>
`;
}else if(!item2 && item1){
$_html = `<div class="news-list-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
<div class="news-list-item-left" onclick="turnToArticle(${i})">
<div class="news-list-item-box"><p>${item1['id']}</p></div>
<div class="news-list-item-description">
<div class="news-list-item-title"><p>${item1['title'].replace("<br>","")}</p></div>
<div class="news-list-item-bottom"></div>
</div>
</div>
<div class="news-list-item-divideHeight"></div>
</div>
`;
}
$(".news-list").append($_html);
}
var $_bottomHtml = `
<div class="newsListBottom>
</div>
`;
$(".news-list").append($_bottomHtml);
}
function lishChange() {
btnChange = !btnChange;
if(btnChange){
// <img class="news_tab_img" src = "https://dm.static.elab-plus.com/elabGuanWang/Showroom@2x.png"/>
$(".news_tab_img").attr("src", "https://dm.static.elab-plus.com/elabGuanWang/Showroom@2x.png");
$(".news-sample-list").empty();
handleListShow();
// background-color: #2C2E34
$(".news-body").css("padding-top","5%");
}else {
$(".news_tab_img").attr("src", "https://dm.static.elab-plus.com/elabGuanWang/List@2x.png");
$(".news-list").empty();
handleModuleShow();
$(".news-body").css("padding-top","0%");
$(".top-menu-news").css("background-color","#2C2E34");
}
}
$(".news_tab_img").on("click", function (e) {
lishChange();
});
});
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');
}
function turnToArticle(data) {
item = window.newsList[data];
lineUrl = item["linkUrl"];
var parentDiv = document.getElementById("iframeParent");
articleCloseBtn = document.createElement("Div");
articleCloseBtn.setAttribute('class',"article-close");
articleCloseBtn.setAttribute('id','articleCloseBtn');
parentDiv.appendChild(articleCloseBtn);
iframeHtml = document.createElement("iframe");
iframeHtml.setAttribute('frameborder','0');
iframeHtml.setAttribute('height','100%');
iframeHtml.setAttribute('width','100%');
iframeHtml.setAttribute('scrolling','yes');
iframeHtml.setAttribute('name','newsIframe');
parentDiv.appendChild(iframeHtml);
// window.frames.newsIframe.window.location.reload(true);
iframeHtml.setAttribute('src',lineUrl);
$(".top-menu-news").css("background-color","#FFFFFF");
if(!lineUrl){
return
}
// frame.src = lineUrl;
$('.news-iframe').attr('src', $('.news-iframe').attr('src'));
$(".inner-main").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_2.png");
$(".inner-menu").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_3.png");
$(".inner-artcle").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
$(".news-detail").addClass("active");
iframeShow = true;
// news-body
}
</script>
</body>
</html>