zhangs
/
elab


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976
							<!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>ELAB</title>
    <link href="css/reset.css" rel="stylesheet"></link>
    <link href="css/style.css?v=1.001" rel="stylesheet"></link>
    <link href="css/unslider.css" rel="stylesheet"></link>
    <link href="css/animate.min.css" rel="stylesheet"></link>
    <style type="text/css">
        .page {
            opacity: 0;
        }
        .top-menu {
            background: none;
        }
        .layer-frameNews{
            overflow: auto;
            -webkit-overflow-scrolling:touch;
        }
    </style>
</head>

<body>
<!--loading z-index:99999-->
<div class="loading">
    <iframe frameborder="0" height="100%" scrolling="no" src="loading.html" width="100%"></iframe>
</div>

<div class="page" id="menuLayer">

    <!--top menu-->
    <div class="top-menu wow fadeInDown" data-wow-delay="1s" data-wow-duration="1s">
        <div class="logo">
            <a href="index.html"><img class="inner-icon"
                                      src="http://yun-image.elab-plus.com/images/index/1_objects@2x_2.png"/></a>
        </div>
        <div class="menu"><img class="inner-icon" src="http://yun-image.elab-plus.com/images/index/1_objects@2x_3.png"/>
        </div>
        <div class="cases">
            <a href="javascript:showProjects();"><img class="inner-icon"
                                                      src="http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png"/></a>
        </div>
    </div>

    <!--main menu-->
    <div class="main-menu" data-wow-delay="2s" data-wow-duration="1s">
        <!--contact us-->
        <div class="menu-background"></div>
        <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>
        <div id="water1"></div>
        <div id="water2"></div>
        <ul class="menu-list">
            <li class="elab_who">
                <a href="javascript:showWho();">ELAB是谁
                    <small>WHO IS ELAB</small>
                </a>
            </li>
            <li class="elab_what">
                <a href="javascript:showDo();">ELAB在做什么
                    <small>WHAT ELAB DO</small>
                </a>
            </li>
            <li class="elab_news">
                <a href="javascript:showNews();">新闻中心
                    <small>NEWS</small>
                </a>
            </li>
            <li class="elab_project">
                <a href="javascript:showProjects();">作品案例
                    <small>PROJECTS</small>
                </a>
            </li>
            <li class="elab_contact">
                <a href="javascript:showCareers();">加入我们
                    <small>CAREERS</small>
                </a>
            </li>
            <!--<li>-->
                <!--<a href="javascript:showContact();">联系我们-->
                    <!--<small>CONTACTS</small>-->
                <!--</a>-->
            <!--</li>-->
        </ul>
    </div>

    <!--main-->
    <div class="index-body wow fadeIn" data-wow-delay="0s" data-wow-duration="1s">
        <div class="slider">
            <ul></ul>
            <div class="slider-title wow fadeIn" data-wow-delay="4s" data-wow-duration="1s" id="slider-title">测试字体位置
            </div>
            <!--<div class="">-->
                <!--<a class="slider-links wow fadeIn" data-wow-delay="4s" data-wow-duration="1s" id="slider-links">了解详情</a>-->
            <!--</div>-->
        </div>
        <div class="small-slider">
            <img class="slider-img wow fadeIn" data-wow-delay="1s" data-wow-duration="2s"
                 src="http://yun-image.elab-plus.com/images/index/1_objects@2x.png"/>
            <!--<div class="">-->
                <!--<a class="slider-links wow fadeIn" data-wow-delay="5.2s" data-wow-duration="1s"-->
                   <!--href="javascript:showProjects();">了解详情</a>-->
            <!--</div>-->
        </div>
    </div>

    <div class="who-we-are wow fadeInUpIndex" data-wow-delay="3s" data-wow-duration="1s">
        <p>
            <a href="javascript:showWho();">我们是谁</a>
        </p>
        <div class="slide-line"></div>
        <div class="slide-line1"></div>
    </div>
    <div class="what-we-do wow fadeInUpIndex1" data-wow-delay="3s" data-wow-duration="1s">
        <p>
            <a href="javascript:showDo();">我们在做什么</a>
        </p>
        <div class="slide-line"></div>
        <div class="slide-line1"></div>
    </div>

    <div class="wave-bg" id="leftWave">
        <div class="wave-bg-inner1"></div>
        <div class="wave-bg-inner2"></div>
    </div>
    <div class="wave-bg" id="rightWave">
        <div class="wave-bg-inner1"></div>
        <div class="wave-bg-inner2"></div>
    </div>

    <!--footer-->
    <div class="footer wow fadeIn" data-wow-delay="3.2s" data-wow-duration="1s">
        <div class="mobile-hide left">Copyright©2015-2018, elab-plus.com. All rights reserved. | <a style="text-decoration:none;color:black" href="http://www.miitbeian.gov.cn"> 沪ICP备15047801号</a></div>
        <div class="mobile-hide right">上海定卓⽹络科技有限公司 电话：021-50753278 地址：上海市静安区彭江路602号E座408室</div>
        <div class="mobile-display left" style="visibility: hidden;">Copyright©2015-2018 | <a class="icpStyle" style="text-decoration:none;color:white" href="http://www.miitbeian.gov.cn"> 沪ICP备15047801号</a></div>
    </div>

</div>

<!--who we are-->
<div class="whoWeAre pageLayer" hidden>
    <div class="black-mask"></div>
    <iframe frameborder="0" height="100%" name="frameWho" scrolling="yes" src="licheng.html?v=1.54325432545"
            width="100%"></iframe>
</div>
<!--/who we are-->

<!--what we do-->
<div class="whatWeDo pageLayer" hidden>
    <div class="black-mask"></div>
    <iframe frameborder="0" height="100%" name="frameDo" scrolling="yes" src="do.html" width="100%"></iframe>
</div>
<!--/what we do-->

<!--contact us-->
<div class="contactLayer pageLayer">
    <iframe frameborder="0" height="100%" name="frameContacts" scrolling="yes" src="contact.html" width="100%"></iframe>
</div>
<!--/contact us-->

<!--news center-->
<div class="newsLayer pageLayer" hidden>
    <iframe marginWidth=0 marginHeight=0 frameborder="0" class="layer-frameNews" name="frameNews" scrolling="auto" src="news.html" width="100%" height="100%"></iframe>
</div>
<!--/news center-->

<!--what we do-->
<div class="careersLayer pageLayer">
    <iframe frameborder="0" height="100%" name="frameCareers" scrolling="yes" src="careers.html" width="100%"></iframe>
</div>
<!--/what we do-->

<!--project show-->
<div class="projectsLayer pageLayer">
    <iframe frameborder="0" height="100%" name="frameProjects" scrolling="yes" src="projects.html?v=1.4324214"
            width="100%"></iframe>
</div>
<!--/project show-->

<!--project list-->
<div class="listLayer pageLayer">
    <iframe frameborder="0" height="100%" id="frameList" name="frameList" scrolling="yes" src="projects-1.html"
            width="100%"></iframe>
</div>
<!--/project list-->

<!--project detail-->
<div class="detailLayer pageLayer">
    <iframe frameborder="0" height="100%" id="frameDetail" name="frameDetail" scrolling="yes" src="projects-1-1.html"
            width="100%"></iframe>
</div>
<!--/project detail-->

<!--project detail-->
<div class="chuangLayer pageLayer">
    <iframe frameborder="0" height="100%" id="frameChuang" name="frameChuang" scrolling="yes"
            src="chuangshiren.html?v=1.0000" width="100%"></iframe>
</div>
<!--/project detail-->

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/unslider-min.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.event.swipe.js"></script>
<script src="js/wow.js"></script>
<script src="water/js/pixi.min.js"></script>
<script src="water/js/TweenMax.min.js"></script>
<script src="water/js/main.js"></script>
<!--<script src="js/debug.js"></script>-->

<script>
    //绑定前进后退事件
    var $_cpage = "index";
    // 隐藏地址栏
    //            if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
    //                bodyTag = document.getElementsByTagName('body')[0];
    //                bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
    //            }
    //            window.onload=function(){
    //                setTimeout(function() {
    //                    window.scrollTo(0, 1)
    //                }, 0);
    //            };

    //当前页面
    window.onpopstate = function (event) {
        var $_state = event.state;
        console.log("the state is: ");
        console.log($_state);
        if (!$_state) {
            return false;
        }
        var $_url = window.location.href;
        var $_mark = $_url.split("#")[1] || "";
        console.log($_mark);

        //if($_state.page == 'who' && $_cpage == 'chuang') { //创始人页回退直接显示who

        //} else {
        //先回退到首页,再执行显示某个页面
        showIndex();

        if ($_mark != "") {
            if ($_state.page == "who") {
                showWho();
            }
            if ($_state.page == "do") {
                showDo();
            }
            if ($_state.page == "projects" || $_state.page == "list") {
                showProjects();
            }
            if ($_state.page == "careers") {
                showCareers();
            }
            if ($_state.page == "contact") {
                showContact();
            }
            if ($_state.page == "news") {
                showNews();
            }
        }
        //}

    };

    /*slider*/
    $(function () {

        //存入首页的history数据
        history.pushState({
            page: 'index'
        }, "index", "index.html");

        //footer for mobile
        var $_w = $('html body').width();
        console.log("the w is:" + $_w);
        if ($_w <= 768) {
            $(".footer").removeClass("fadeIn").addClass("fadeInLeft");
        }

        //大图数据加载
        var percent, Count, Imgs;
        var ImgLoaded = 0;
        var spriteImagesSrc = [];
        var texts = [];
        var urls = [];
        var tmpImgs = [];
        var $_vw = $(window).width();
//				if($_vw >= 768) {
        $.get("http://106.14.225.13:8081/rest/listBanner", function (result) {

            var $_list = result.result.list;
            if ($_list.length > 0) { //有返回数据列表
                $(".slider ul").empty();
                var host = "";

                for (var i = 0; i < $_list.length; i++) { //生成unslide数据
                    var img = $_list[i];
                    spriteImagesSrc.push(host + img['image']);
                    urls.push(img['url']);
                    texts.push(img['name']);
                    // 	var $_html = `<li>
                    // <img class="slider-img animation" src="${host+img['image']}" />
                    // <div class="slider-title">${img['name']}</div>
                    // <div class="">
                    // 	<a href="javascript:showSliderLink('${img['url']}');" class="slider-links wow fadeIn" data-wow-duration="1s" data-wow-delay="4s">浏览作品</a>
                    // </div>
                    //   </li>`;
                    // 	$(".slider ul").append($_html);
                }
                Count = $_list.length; //图片数量
                Imgs = new Map();
                for (var i = 0; i < $_list.length; i++) {
                    Imgs.set(spriteImagesSrc[i], {width: 0, height: 0});
                }
                console.log(urls);
                let href = "javascript:showSliderLink('" + urls[0] + "');";
                $('#slider-links').attr('href', href);
                for (var i = 0; i < $_list.length; i++) {
                    var tmp = i;
                    var a = new Image();
                    tmpImgs[tmp] = a;
                    tmpImgs[tmp].src = spriteImagesSrc[tmp];
                    tmpImgs[tmp].onload = onLoad(tmp);
                }

                // Imgs = new Array(Count);
                // for(var i = 0 ; i < Imgs.length ; i++){
                // 	Imgs[i] = new Image();
                // 	Imgs[i].src = spriteImagesSrc[i];
                // 	if(Imgs[i].complete){
                // 	 // 打印
                // 	 console.log('from:complete : width:'+img.width+',height:'+img.height);
                // 		ImgLoaded++;
                // 	}else{
                // 	 // 加载完成执行
                // 	 Imgs[i].onload = validateImages(i);
                // 	}
                // }
                // if(ImgLoaded == Count){
                // 	validateImages(0);
                // }
                //列表加载完毕，开始slider
                // var mySlider = $('.slider').unslider({
                // 	infinite: true,
                // 	nav: false,
                // 	arrows: false,
                // 	autoplay: true,
                // 	delay: 3000,
                // 	speed: 800
                // 	//index: s //初始化显示哪个礼品的索引
                // });

            }
        });

        function onLoad(i) {
            console.log("onLoad" + i);
            ImgLoaded++;
            console.log(tmpImgs[i].src + "|" + tmpImgs[i].width + tmpImgs[i].height);
            // Imgs.set(tmpImgs[i].src, {width :tmpImgs[i].width, height:tmpImgs[i].height});
            if (ImgLoaded == Count) {
                console.log("onLoad:"+JSON.stringify(Imgs));
                var initCanvasSlideshow = new CanvasSlideshow({
                    sprites: spriteImagesSrc,
                    displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
                    autoPlay: true,
                    autoPlaySpeed: [10, 3],
                    displaceScale: [0, 0],
                    stageWidth: $('.slider ul').width,
                    stageHeight: $('.slider ul').height,
                    x: $('.slider ul').x,
                    y: $('.slider ul').y,
                    screenWidth: $('.page')[0].clientWidth,
                    screenHeight: $('.page')[0].clientHeight,
                    centerSprites: true,
                    wacky: false,
                    displacementCenter: true,
                    origImages: Imgs
                });
                var index = 0;
                $('#slider-title').text(texts[index]);
                setInterval(() => {
                    var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
                    initCanvasSlideshow.moveSlider(newIndex, function () {
                    });
                    index = newIndex;
                    setTimeout(() => {
                        $('#slider-title').text(texts[index]);
                        let href = "javascript:showSliderLink('" + urls[index] + "');";
                        $('#slider-links').attr('href', href);
                    }, 1000);
                }, 8000);
            }
        }

//				}
        //验证是否成功加载完成，如不成功则重新加载
        // function validateImages(i) {
        // 		ImgLoaded++;
        // 		console.log(Imgs);
        // 		//console.log("the count is: " + Count);
        // 		if(ImgLoaded >= Count) {
        // 			//加载完毕，开始slider
        // 			// var mySlider = $('.slider').unslider({
        // 			// 	infinite: true,
        // 			// 	nav: false,
        // 			// 	arrows: false,
        // 			// 	autoplay: true,
        // 			// 	delay: 3000,
        // 			// 	speed: 800
        // 			// 	//index: s //初始化显示哪个礼品的索引
        // 			// });
        // 			var initCanvasSlideshow = new CanvasSlideshow({
        // 				sprites: spriteImagesSrc,
        // 				displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',
        // 				autoPlay: true,
        // 				autoPlaySpeed: [10, 3],
        // 				displaceScale: [100, 70],
        // 				stageWidth : $('.slider ul').width,
        // 				stageHeight : $('.slider ul').height,
        // 				x : $('.slider ul').x,
        // 				y : $('.slider ul').y,
        // 				screenWidth : $('.page')[0].clientWidth,
        // 				screenHeight : $('.page')[0].clientHeight,
        // 				centerSprites : true,
        // 				wacky: false,
        // 				displacementCenter: true,
        // 				texts:texts,
        // 				origImages : Imgs
        // 			});
        // 			var index = 0;
        // 			setInterval(() => {
        // 				var newIndex = index + 1 >= spriteImagesSrc.length ? 0 : index + 1;
        // 				initCanvasSlideshow.moveSlider(newIndex);
        // 				index = newIndex;
        // 			}, 8000);
        // 		}
        //
        // }

    });
    //resize
    window.onresize = function () {
        //window.location.reload();
    }
    /* end slider*/
    var markIdx = 0;
    var currentIdx = 0;
    var lastIdx = 0;
    $(function () {

        //show menu
        $("#menuLayer .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);
        });

        $('#whatWeDo .menu').on('click', function (e) {
            $(".whatWeDo").fadeOut(500);
            e.stopPropagation();
            setTimeout(function () {
                $(".whatWeDo").removeClass("in");
            }, 500);
        });

        <!-- 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);

    });

    /*window.onload = function() {
        var $_w = $('html body').width();
        console.log("the w is:" + $_w);
        if($_w <= 768) {
            $(".footer").removeClass("fadeIn").addClass("fadeInLeft");
        }
    }*/
    var checkLoad = setInterval(function () {
        // localStorage.setItem("loadComplete","0");
        if(localStorage.getItem("loadComplete") === "1"){
            hideLoading();
            clearInterval(checkLoad);
        }
    },800);

    //loading completed
    function hideLoading() {
        //console.log("here");
        $(".loading").fadeOut(1000);
        $(".page").css("opacity", "1");
        //start wow
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();
    }


    /****页面操作区*****/
    //返回首页统一处理函数
    function showIndex() {
        $(".pageLayer").each(function (i) {
            var $_class = $(this).attr("class");
            //console.log($_class);
            if ($_class.indexOf("whoWeAre") > -1 || $_class.indexOf("whatWeDo") > -1 || $_class.indexOf("listLayer") > -1 || $_class.indexOf("detailLayer") > -1) {
                $(this).removeClass("in");
            } else {
                $(this).fadeOut();
            }
        });
        $(".whoWeAre").hide();
        $(".whatWeDo").hide();
    }

    //show who
    function showWho() {
        $(".whoWeAre").show();
        $(".whoWeAre").addClass("in");
        frameWho.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'who'
        }, "who we are", "#who");
        $_cpage = "who";
    }

    //close who we are
    function closeWho() {
        $(".whoWeAre").removeClass("in");
    }

    //show do
    function showDo(istrue) {
        $(".whatWeDo").show();
        $(".whatWeDo").addClass("in");
        frameDo.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'do'
        }, "what we do", "#do");
        $_cpage = "do";
    }

    //close what we do
    function closeDo() {
        $(".whatWeDo").removeClass("in");
    }

    //show contacts
    function showContact() {
        $(".contactLayer").fadeIn(500);
        frameContacts.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'contact'
        }, "contact", "#contact");
        $_cpage = "contact";
    }

    //close contacts
    function closeContact() {
        $(".contactLayer").fadeOut(1000);
    }

    //show contacts
    function showNews() {
        $(".newsLayer").fadeIn(500);
        frameNews.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'news'
        }, "news", "#news");
        $_cpage = "news";
    }

    //close contacts
    function closeNews() {
        $(".newsLayer").fadeOut(1000);
    }

    //show contacts
    function showCareers() {
        $(".careersLayer").fadeIn(500);
        frameCareers.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'careers'
        }, "careers", "#careers");
        $_cpage = "careers";
    }

    //close contacts
    function closeCareers() {
        $(".careersLayer").fadeOut(1000);
    }

    //show Projects
    function showProjects() {
        $(".projectsLayer").fadeIn(500);
        frameProjects.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'projects'
        }, "projects", "#projects");
        $_cpage = "projects";
    }

    //close contacts
    function closeProjects() {
        $(".projectsLayer").fadeOut(1000);
    }

    //close sub layer and show projects
    function closeAndShowPro(str) {
        console.log(str);
        $("." + str + "").fadeOut(1000);
        setTimeout(function () {
            showProjects();
        }, 500);
    }

    //close sub layer and show careers
    function closeAndShowCareers() {
        $(".whoWeAre").fadeOut(1000);
        setTimeout(function () {
            $(".whoWeAre").removeClass("in");
            showCareers();
        }, 500);
    }

    //show list-1
    function showList(id) {

        $('#frameList').attr("src", "projects-1.html?parent=" + id + "");
        $(".listLayer").addClass("in");
        //frameList.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'list'
        }, "listLayer", "#list");
        $_cpage = "list";
    }

    //close list
    function closeList() {
        $(".listLayer").removeClass("in");
    }

    //show list-1
    function showDetail(src) {
        if (!src || src == "" || src == "#") {
            return false;
        }
        $('#frameDetail').attr("src", "." + src + "");
        $(".detailLayer").addClass("in");
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'detail'
        }, "detailLayer", "#detail");
        $_cpage = "detail";

    }

    //close list
    function closeDetail() {
        $(".detailLayer").removeClass("in");
    }

    //showSliderLink
    function showSliderLink(url) {

        if (!url || url == "" || url == "#") {
            return false;
        }

        $('#frameDetail').attr("src", "./" + url + "");
        $(".detailLayer").addClass("in");
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'detail'
        }, "detailLayer", "#detail");
        $_cpage = "detail";
    }

    //show do
    function showChuang() {
        $(".chuangLayer").addClass("in");
        frameChuang.window.startWow();
        $(".main-menu").removeClass("active");
        //存入history数据，并设置当前页面
        history.pushState({
            page: 'chuang'
        }, "chuang shiren ", "#chuang");
        $_cpage = "chuang";
    }

    //close what we do
    function closeChuang() {
        $(".chuangLayer").removeClass("in");
    }
</script>

</body>

</html>