zoukankan      html  css  js  c++  java
  • 两个界面来回切换展示(左下角 有小demo)

     
    .zoomBox{
             800px;
            height: 550px;
            border: 1px solid green;
            margin: 0 auto;
            position: relative;
        }
        .comminBox{
            height: 100%;
             100%;
        }
        .Content{
             100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(20, 224, 146, 0.171);
        }
        .activeSmall_One{
            100%;
            height: 100%;
            transform: scale(0.15);
            margin-top: 28.8%;
            margin-left: -42%;
            z-index: 2;
            position: absolute;
            
        }
        .activeZoom_One{
            100%;
            height: 100%;
            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{
             100%;
            height: 100%;
            display: inline-block;
        }
        .activeSmall_Two{
            100%;
            height: 100%;
            transform: scale(0.15);
            margin-top: 28.8%;
            margin-left: -42%;
            z-index:2;
            position: absolute;
        }
        .activeZoom_Two{
            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')
                }
     
     
  • 相关阅读:
    js事件
    增量
    文本文件输入(忽略行)
    当数据库的字段为date类型时候
    枚举的使用
    input输入框用el对数字格式化
    图片提交按钮各浏览器不兼容问题
    js对数字的校验
    时间控件
    ymPrompt消息提示组件4.0版 演示及使用简介
  • 原文地址:https://www.cnblogs.com/lihong-123/p/13305824.html
Copyright © 2011-2022 走看看