| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431 | <!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>
 |