前面提到了自定义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");
});
},