两个界面来回切换展示（左下角 有小demo）
.zoomBox{
width: 800px;
height: 550px;
border: 1px solid green;
margin: 0 auto;
position: relative;
}
.comminBox{
height: 100%;
width: 100%;
}
.Content{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(20, 224, 146, 0.171);
}
.activeSmall_One{
width:100%;
height: 100%;
transform: scale(0.15);
margin-top: 28.8%;
margin-left: -42%;
z-index: 2;
position: absolute;
}
.activeZoom_One{
width:100%;
height: 100%;
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: bgGuodu 0.8s forwards;
}
.twoBG{
position: absolute;
top: 0;
left: 0;
}
.bgImg{
width: 100%;
height: 100%;
display: inline-block;
}
.activeSmall_Two{
width:100%;
height: 100%;
transform: scale(0.15);
margin-top: 28.8%;
margin-left: -42%;
z-index:2;
position: absolute;
}
.activeZoom_Two{
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: bgGuodu 0.8s forwards;
}
@keyframes bgGuodu {
0%{
transform: scale(0.15);
}
100%{
transform: scale(1);
}
}
<div class="zoomBox">
<div id='elemtSpecificId_One' class='comminBox activeSmall_One'>
<div class="Content">处兑换成不VVJ的VB的把比较大</div>
</div>
<div id='elemtSpecificId_Two' class='comminBox twoBG'>
<img src="./img/1.jpg" alt="" class='bgImg'>
</div>
</div>
var elemtSpecificId_One = document.getElementById('elemtSpecificId_One')
var elemtSpecificId_Two = document.getElementById('elemtSpecificId_Two')
elemtSpecificId_One.onclick=function () {
console.log('放大')
elemtSpecificId_One.classList.remove('activeSmall_One')
elemtSpecificId_One.classList.add('activeZoom_One')
elemtSpecificId_Two.classList.add('activeSmall_Two')
elemtSpecificId_Two.classList.remove('activeZoom_Two')
}
elemtSpecificId_Two.onclick = function() {
console.log('缩小')
elemtSpecificId_One.classList.add('activeSmall_One')
elemtSpecificId_One.classList.remove('activeZoom_One')
elemtSpecificId_Two.classList.add('activeZoom_Two')
elemtSpecificId_Two.classList.remove('activeSmall_Two')
}
