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