HSGroup
/
portal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>LOCATION</title>
    <style type="text/css">
        #backImg{
            position: absolute;
            width: 100%;
            height: 100vh;
            box-sizing: border-box;
            padding: 10px;
            z-index:99;
        }
        .pop{
            position: absolute;
            width: 100%;
            height: 100vh;
            box-sizing: border-box;
            padding: 10px;
            z-index:1;
            background:rgba(64,225,243,0.1);
        }
        .titleBox{
            position: absolute;
            display: flex;
            width: 83%;
            height: 40px;
            top: 0px;
            right: 0px;
            z-index: 99;
        }
        #jscs,#msjg,#jtcx,#sthj,#csfz,#smxs,#zhgd,#yjgl,#sjgx,#zhzf{
            height:40px;
            width: 6.3%;
            /* background:rgba(255,0,0,0.2); */
            cursor: pointer;
        }
        #msjgSecond{
            display:none;
            width: 18%;
            position:absolute;
            z-index: 100;
            height: 25px;
            /* background: rgba(255,0,0,0.3); */
            left: 21%;
            top: 9%;
        }
        #msjgSecond #jiaoyu{
            cursor: pointer;
            display: inline-block;
            width: 40%;
            height: 100%;
        }
        #msjgSecond #yiliao{
            cursor: pointer;
            display: inline-block;
            width: 57%;
            height: 100%;
        }
        #jtcxSecond{
            display:none;
            width: 18%;
            position:absolute;
            z-index: 100;
            height: 25px;
            /* background: rgba(0,255,0,0.3); */
            left: 21%;
            top: 9%;
        }
        #jtcxSecond #shishi{
            cursor: pointer;
            display: inline-block;
            width: 22%;
            height: 100%;
        }
        #jtcxSecond #gongjiao{
            cursor: pointer;
            display: inline-block;
            width: 74%;
            height: 100%;
        }
        /* 生态环境 */
        #sthjSecond{
            display:none;
            width: 22%;
            position:absolute;
            z-index: 100;
            height: 25px;
            /* background: rgba(0,0,255,0.3); */
            left: 21%;
            top: 9%;
        }
        #sthjSecond #shui{
            cursor: pointer;
            display: inline-block;
            width: 35%;
            height: 100%;
        }
        #sthjSecond #kongqi{
            cursor: pointer;
            display: inline-block;
            width: 38%;
            height: 100%;
        }
        #sthjSecond #wuran{
            cursor: pointer;
            display: inline-block;
            width: 22%;
            height: 100%;
        }
        /* 市民心声 */
        #smxsSecond{
            display:none;
            width: 18%;
            position:absolute;
            z-index: 100;
            height: 25px;
            /* background: rgba(255,0,0,0.3); */
            left: 21%;
            top: 9%;
        }
        #smxsSecond #tousu{
            cursor: pointer;
            display: inline-block;
            width: 40%;
            height: 100%;
        }
        #smxsSecond #fenbu{
            cursor: pointer;
            display: inline-block;
            width: 57%;
            height: 100%;
        }
    </style>
</head>
<body>
	<div id="wrapper">
        <div id="interactive"></div>
        </div>
        <div class='pop'></div>
        <img id='backImg' src="./images/back.png" style="width: 100%;">
        <!-- <div class="box">
            <div class="skew"><div class="skew-main">用css3旋转写平行四边形</div></div>
        </div> -->
        <div class='titleBox'>
            <div id='jscs' onclick="toPage('jscs')"></div>
            <div id='msjg' onclick="toPage('msjg')"></div>
            <div id='jtcx' onclick="toPage('jtcx')"></div>
            <div id='sthj' onclick="toPage('sthj')"></div>
            <div id='csfz' onclick="toPage('csfz')"></div>
            <div id='smxs' onclick="toPage('smxs')"></div>
            <div id='zhgd' onclick="toPage('zhgd')"></div>
            <div id='yjgl' onclick="toPage('yjgl')"></div>
            <div id='sjgx' onclick="toPage('sjgx')"></div>
            <div id='zhzf' onclick="toPage('zhzf')"></div>
        </div>
        <div id='msjgSecond'>
            <span id='jiaoyu' onClick='toMsjgSecondPage(1)'></span>
            <span id='yiliao' onClick='toMsjgSecondPage(2)'></span>
        </div>
        <div id='jtcxSecond'>
            <span id='shishi' onClick='toJtcxSecondPage(1)'></span>
            <span id='gongjiao' onClick='toJtcxSecondPage(2)'></span>
        </div>
        <div id='sthjSecond'>
            <span id='shui' onClick='toSthjSecond(1)'></span>
            <span id='kongqi' onClick='toSthjSecond(2)'></span>
            <span id='wuran' onClick='toSthjSecond(3)'></span>
        </div>
        <div id='smxsSecond'>
            <span id='tousu' onClick='toSmxsSecond(1)'></span>
            <span id='fenbu' onClick='toSmxsSecond(2)'></span>
        </div>
    <script  src="earth.js"></script>
</body>
<!-- 确保运行本地服务器上 -->
<!--  -->
</html>
<script>
    var outerItem = 'jscs'
   

    function toPage(page){
        document.getElementById("msjgSecond").style.display="none";
        document.getElementById("jtcxSecond").style.display="none";
        document.getElementById("sthjSecond").style.display="none";
        document.getElementById("smxsSecond").style.display="none";
        
        outerItem = page; 
        if(page == 'jscs'){
            document.getElementById("backImg").src="./images/back.png" 
        }else{
            document.getElementById("backImg").src="./images/"+ page +".png" 
        }
        var childs = document.getElementById(page).parentNode.childNodes
        for(var i in childs){
            if(i%2 == 1){
                childs[i].style.width = '6.3%'
            }
            
        }
        document.getElementById(page).style.width = '11.5%'

        if(page == 'msjg'){
            document.getElementById("msjgSecond").style.display="block";
        }else if(page == 'jtcx'){
            document.getElementById("jtcxSecond").style.display="block";
        }else if(page == 'sthj'){
            document.getElementById("sthjSecond").style.display="block";
        }else if(page == 'smxs'){
            document.getElementById("smxsSecond").style.display="block";
        }
        
    }
    // 民生机构
    function toMsjgSecondPage(num){
        toPage('msjg')
        if(num === 2){
            document.getElementById("backImg").src="./images/msjg2.png"
        }else{
            
        }
    }
    // 交通出行
    function toJtcxSecondPage(num){
        toPage('jtcx')
        if(num === 2){
            document.getElementById("backImg").src="./images/jtcx2.png"
        }else{
        }
    }
    // 生态环境
    function toSthjSecond(num){
        toPage('sthj')
        if(num === 1){
            document.getElementById("backImg").src="./images/sthj.png"
        }else if(num === 2){
            document.getElementById("backImg").src="./images/sthj2.png"
        }else if(num === 3){
            document.getElementById("backImg").src="./images/sthj3.png"
        }
    }
    // 市民心声
    function toSmxsSecond(num){
        toPage('msjg')
        if(num === 2){
            document.getElementById("backImg").src="./images/smxs2.png"
        }else{
            
        }
    }

    if(outerItem == 'jscs'){
        document.getElementById("backImg").src="./images/back.png"
        jscs.style.width ='11.5%'
    } 
    
</script>