| | |
| | | |
| | | <body class="claro jimu-main-font"> |
| | | <style> |
| | | .qhdiv { |
| | | z-index:10000; |
| | | position: fixed; |
| | | top: calc(40% - 90px); |
| | | transform: translate(0, -50%); |
| | | right: 20px; |
| | | display: flex; |
| | | flex-direction: column;margin: 0; |
| | | width: 55px; |
| | | height: 100px; |
| | | text-align: center |
| | | } |
| | | .qhbtn { |
| | | border: 0; |
| | | width: 50px; |
| | | height: 50px; |
| | | background: url('images/qh001.jpg'); |
| | | background-size: 100%; |
| | | border-radius: 50%; |
| | | cursor: pointer; |
| | | } |
| | | .qhbtn:before, .qhbtn:after { |
| | | opacity: 0; /*透明度为完全透明*/ |
| | | .ss { |
| | | border-radius: 5px; |
| | | height: 32px; |
| | | width: 32px; |
| | | position: absolute; |
| | | z-index: 100000; /*设为最上层*/ |
| | | /*鼠标放上元素上时的动画,鼠标放上后效果在.tip-*:hover:before, .tip-*:hover:after中设置; |
| | | 0.3s:规定完成过渡效果需要多少秒或毫秒,ease:规定慢速开始,然后变快,然后慢速结束的过渡效果*/ |
| | | transition: 0.3s ease; |
| | | -webkit-transition: 0.3s ease; |
| | | -moz-transition: 0.3s ease; |
| | | } |
| | | .qhbtn:before { |
| | | content: '切换2D'; |
| | | border: 6px solid transparent; |
| | | white-space: nowrap; /*强制不换行*/ |
| | | background-color: #000000; |
| | | color: #ffffff; |
| | | .map3d-system { |
| | | background: #303336 url('images/3d-2-03.png'); |
| | | border: 1px solid #303336; |
| | | background-size: cover; |
| | | z-index:6; |
| | | cursor:pointer; |
| | | right: 0.7%; |
| | | bottom: 25%; |
| | | } |
| | | |
| | | .qhbtn:after { |
| | | content: '切换2D'; /*获取要提示的文本*/ |
| | | padding: 5px; |
| | | white-space: nowrap; /*强制不换行*/ |
| | | background-color: #000000; |
| | | color: #ffffff; |
| | | .map3d-system:hover{ |
| | | color: #fff; |
| | | fill: #fff; |
| | | background: #48b url('images/3d-2-03.png'); |
| | | background-size: cover; |
| | | border-color: #aef; |
| | | box-shadow: 0 0 8px #fff; |
| | | } |
| | | |
| | | .qhbtn:hover:before, .tip:hover:after { |
| | | opacity: 1; /*鼠标放上时透明度为完全显示*/ |
| | | z-index: 1000; |
| | | .map3d-2d { |
| | | background: #303336 url('images/2d-2-02.png'); |
| | | border: 1px solid #303336; |
| | | background-size: cover; |
| | | z-index:6; |
| | | cursor:pointer; |
| | | right: 3.5%; |
| | | bottom: 25%; |
| | | } |
| | | |
| | | .tip-left:before { |
| | | top: 50%; |
| | | left: 0%; |
| | | border-left-color: rgba(0, 0, 0, 0.8); |
| | | margin-left: 0px; |
| | | margin-top: -3px; |
| | | } |
| | | |
| | | .tip-left:after { |
| | | top: 50%; |
| | | right: 100%; |
| | | margin-right: 0px; |
| | | margin-top: -6px; |
| | | } |
| | | |
| | | .tip-left:hover:before { |
| | | margin-left: -6px; |
| | | } |
| | | |
| | | .tip-left:hover:after { |
| | | margin-right: 6px; |
| | | .map3d-2d:hover{ |
| | | color: #fff; |
| | | fill: #fff; |
| | | background: #48b url('images/2d-2-02.png'); |
| | | background-size: cover; |
| | | border-color: #aef; |
| | | box-shadow: 0 0 8px #fff; |
| | | } |
| | | </style> |
| | | <div class="qhdiv" onclick="javascript:window.location='http://localhost:63342/hsyj/index.html'"> |
| | | <button type="button" class="qhbtn tip-left" data-tip="我是上边提示"><span style="color:dodgerblue;"></span></button> |
| | | </div> |
| | | <div class="map3d-system ss" id="map3d" title="系统切换" onclick="map3dClick()"></div> |
| | | <div class="map3d-2d ss" id="map2d" title="切换2D"></div> |
| | | |
| | | <div id="main-loading"> |
| | | <div id="app-loading"></div> |
| | | <div id="loading-gif"></div> |
| | |
| | | </script> --> |
| | | <script type="text/javascript" src="init.js"></script> |
| | | <script> |
| | | $('#map2d').hide(); |
| | | function runWidget(name) { |
| | | require(['dojo/topic'], |
| | | function(topic) { |
| | |
| | | }); |
| | | } |
| | | |
| | | function map3dClick() { |
| | | if($('#map2d').is(':hidden')){ //如果node是隐藏的则显示node元素,否则隐藏 |
| | | $('#map2d').show(); |
| | | }else{ |
| | | $('#map2d').hide(); |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | </body> |
| | | </html> |