模拟elment大图预览

 <!-- 大图预览 -->

            <div class="bigPicBox" id="bigPicBox" onmousewheel='mousewheel(event)'>

                <div class="bigPicBox_mask" onclick="hidenImg()"></div>

                <span class="bigPicBox_mask_btn bigPicBox_mask_close"  onclick="hidenImg()"><i class="icon-close"></i></span>

                <div class="bigPicBox_mask_btn bigPicBox_actions">

                    <div class="bigPicBox_actions_inner">

                        <i class="icon-out" onclick="remSizeImg()"></i><i class="icon-in" onclick="addSizeImg()"></i><i class="icon-screen" onclick="resetSizeImg()"></i></i><i class="icon-left" onclick="transLate(-1)"></i><i class="icon-right"  onclick=" transLate(1)"></i>

                    </div>

                </div>

                <div class="bigPicBox_canvas">

                    <img id="bigImg" src="" class="bigPicBox_img" style="transform: scale(1) rotate(0deg); margin-left: 0px; margin-top: 0px; max-height: 100%; max-width: 100%;">

                </div>

            </div>

 

 

 

<script>

        var bigPicBox = document.getElementById('bigPicBox');

        var bigPic = document.getElementById('bigImg');

        var count = 1;

        var degval = 0;

        // 开启大图展示

        function bigImg(src) {

          bigPicBox.style.display='block';

          bigPic.src=src;

        }

        // 关闭大图展示

        function hidenImg() {

          bigPicBox.style.display='none';

        }

        // 滚轮控制图片放大缩小

        function mousewheel(e) {

            e.preventDefault();

         

            if (e.wheelDelta >= 120) {

                count+=0.1;

            }else if(e.wheelDelta <= -120){

                if (count<=0.4) {

                return

            }

                count-=0.1;

            }

            bigPic.style.transform = `scale(${count}) rotate(${degval}deg)` ;

        }

        // 点击减号缩小图片

       function remSizeImg(){

        if (count<=0.4) {

                return

            }

             count-=0.1;

             bigPic.style.transform = `scale(${count}) rotate(${degval}deg)` ;

        }

        //点击加号增大

       function addSizeImg(){

             count+=0.1;

             bigPic.style.transform = `scale(${count}) rotate(${degval}deg)` ;

        }

        // 点击中间按钮

        function resetSizeImg() {

            count = 1;

             bigPic.style.transform = `scale(${count})` ;

        }

        // 点击旋转

        function transLate(val) {

           if (val>0) {

            degval+=90

           }else{

            degval-=90

           }

           bigPic.style.transform =  `rotate(${degval}deg) scale(${count})`

        }

    </script>

 

<style>

/* 大图预览 */

[class*="icon-"]{

    display: inline-block;

    vertical-align: middle;

    background: url(../images/icon.png) no-repeat 0 0;

    width: 24px;

    height: 24px;

    cursor: pointer;

}

//精灵图存放图标，自行修改

.icon-out {

  background-position: -10px -10px;

}

.icon-in {

  background-position: -44px -10px;

}

.icon-screen {

  background-position: -78px -10px;

}

.icon-left {

  background-position: -112px -10px;

}

.icon-right {

  background-position: -146px -10px;

}

.icon-arrow_left {

  background-position: -180px -10px;

}

.icon-arrow_right {

  background-position: -214px -10px;

}

.icon-close {

  background-position: -248px -10px;

}

.bigPicBox{

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 2000;

    display: none;

}

.bigPicBox_mask {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    opacity: .5;

    background: #000;

}

.bigPicBox_mask_btn{

    position: absolute;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    opacity: .8;

    cursor: pointer;

    box-sizing: border-box;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.bigPicBox_mask_close{

    top: 40px;

    right: 40px;

    width: 40px;

    height: 40px;

    font-size: 24px;

    color: #fff;

    background-color: #606266;

    opacity: 1;

}

.el-icon-close{

    color: #fff;

}

.bigPicBox_actions {

    left: 50%;

    bottom: 30px;

    transform: translateX(-50%);

    width: 282px;

    height: 44px;

    padding: 0 23px;

    background-color: #606266;

    border-color: #fff;

    border-radius: 22px;

    overflow: hidden;

}

.bigPicBox_actions_inner {

    width: 100%;

    height: 100%;

    text-align: justify;

    cursor: default;

    font-size: 23px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-around;

}

.bigPicBox_canvas{

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}

</style>