仿百度地图实现底部自动收缩的切换地图模式的三个按钮
作者：互联网
在开发和使用百度地图时,发现百度地图开发的模式切换自动收缩挺方便的,查看了一下网页源代码,发现不是地图封装的控件,是html写的按钮.
这里代码用CSS3 transition 属性实现地图切换.
<html>
<head>
<style scoped>
#mapType {
width: 106px;
height: 70px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 2;
cursor: pointer;
border-radius: 5px;
transition: width 0.8s, height 0.8s;
-moz-transition: width 0.8s, height 0.8s, -moz-transform 0.8s; /* Firefox 4 */
-webkit-transition: width 0.8s, height 0.8s, -webkit-transform 0.8s; /* Safari and Chrome */
-o-transition: width 0.8s, height 0.8s, -o-transform 0.8s; /* Opera */
}
#mapType:hover {
width: 288px;
background: rgba(255, 255, 255, 0.3);
}
#mapType .mapTypeCard {
position: absolute;
top: 5px;
width: 86px;
height: 60px;
border-radius: 5px;
border: solid 1px black;
}
#mapType .mapTypeCard span {
width: 36px;
height: 16px;
position: absolute;
bottom: 1px;
right: 1px;
display: inline-block;
font-size: 12px;
line-height: 16px;
text-align: center;
color: #fff;
background: #888f88;
opacity: 0.8;
}
#mapType .vectorType {
background-color: pink;
z-index: 3;
right: 15px;
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari and Chrome */
-o-transition: right 0.8s; /* Opera */
}
#mapType .imgType {
z-index: 2;
right: 10px;
background-color: rgb(118, 118, 201);
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari and Chrome */
-o-transition: right 0.8s; /* Opera */
}
#mapType .terType {
z-index: 1;
right: 5px;
background-color: greenyellow;
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari and Chrome */
-o-transition: right 0.8s; /* Opera */
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari 和 Chrome */
-o-transition: right 0.8s; /* Opera */
}
#mapType:hover .vectorType {
right: 197px;
}
#mapType:hover .imgType {
right: 101px;
}
#mapType:hover .terType {
right: 5px;
}
#mapType .vectorType:hover,
#mapType .active {
border: solid 1px #31a5f7;
}
#mapType .imgType:hover {
border: solid 1px #31a5f7;
}
#mapType .terType:hover {
border: solid 1px #31a5f7;
}
#mapType .vectorType:hover span,
#mapType .active span {
background: #31a5f7;
}
#mapType .imgType:hover span {
background: #31a5f7;
}
#mapType .terType:hover span {
background: #31a5f7;
}
</style>
</head>
</body>
<div id="map_container"></div>
<div id="mapType">
<div class="mapTypeCard vectorType">
<span>普通</span>
</div>
<div class="mapTypeCard imgType">
<span>卫星</span>
</div>
<div class="mapTypeCard terType" id="terType">
<span>三维</span>
</div>
</div>
<script type="text/javascript">
document.getElementById("terType").onclick=function(){
alert("自动缩放");
};
</script>
</body>
</html>
代码来源:
https://blog.csdn.net/xm_w_xm/article/details/88682548
标签：0.8,right,transition,地图,hover,mapType,background,按钮,百度 来源： https://blog.csdn.net/godot06/article/details/121144270