图片按钮

前面提到了自定义maker，顺便记录下用于切换的图片按钮

按钮定义

<div class="mc">
	<ul class="cards">
		<li class="card card-1">
          <img src="static/images/amap.png" @click="mapChange(true)" />
        </li>
        <li class="card card-2">
          <img src="static/images/emap.png" @click="mapChange(false)" />
        </li>
	</ul>
</div>

样式

ul.cards {
  width: 100px;
  margin: auto;
  height: 60px;
  list-style-type: none;
  position: relative;
  cursor: pointer;
}

ul.cards li.card {
  background: #fff;
  overflow: hidden;
  height: 60px;
  width: 90px;
  border-radius: 5px;
  position: absolute;
  right: 0px;
  box-shadow: 1px 2px 2px 0 #aaa;
  -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
  transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}

ul.cards li.card img {
  max-width: 100%;
}

ul.cards li.card.card-1 {
  z-index: 9;
  right: 10px;
}

ul.cards li.card.card-2 {
  z-index: 10;
}

ul.cards.transition li.card.card-1 {
  right: 100px;
}

ul.cards.transition li.card.card-1.box {
  box-shadow: 0px 0px 3px 2px #2981ca;
}

ul.cards.transition li.card.card-2.box {
  box-shadow: 0px 0px 3px 2px #2981ca;
}

JS

mapCard() {
      $("ul.cards").on("mouseenter", function() {
        $(this).toggleClass("transition");
      });
      $("ul.cards").on("mouseleave", function() {
        $(this).toggleClass("transition");
      });
      $(".card-1").on("mouseenter", function() {
        $(this).toggleClass("box");
      });
      $(".card-1").on("mouseleave", function() {
        $(this).toggleClass("box");
      });
      $(".card-2").on("mouseenter", function() {
        $(this).toggleClass("box");
      });
      $(".card-2").on("mouseleave", function() {
        $(this).toggleClass("box");
      });
    },