当前位置：网站首页>Imitation Baidu map realizes the three buttons to switch the map mode by automatically shrinking the bottom

Imitation Baidu map realizes the three buttons to switch the map mode by automatically shrinking the bottom

2022-04-23 20:24:00 【First code】

When developing and using Baidu map , It is found that the mode switching and automatic contraction of Baidu map development is very convenient , Check the web page source code , Found a control that is not encapsulated by a map , yes html Write button .

  The code here uses CSS3 transition Property to realize map switching .

<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  and  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> Ordinary </span>
    </div>
    <div class="mapTypeCard imgType">
      <span> satellite </span>
    </div>
    <div class="mapTypeCard terType" id="terType">
      <span> The three dimensional </span>
    </div>
  </div>
<script type="text/javascript">
	document.getElementById("terType").onclick=function(){
	alert(" Automatic scaling ");
	};
</script>

</body>
</html>

Source code :

https://blog.csdn.net/xm_w_xm/article/details/88682548

版权声明
本文为[First code]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204210551267827.html

边栏推荐

猜你喜欢

随机推荐