纯js实现的图片查看组件

HTML部分：

    
        
        
        
    
    
        
        

            

                
• 

            

        

            
        

            
        
        

            
        

        
        
    
        
    

 

css部分：

body
{
-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
* {
    padding: 0;
    margin: 0;
}

.uls {
    list-style: none;
    display: flex;
    justify-content: center;
}

.li_item {
    cursor: pointer;
}

.show_pic_wrapp {
    transition: all 0.3s linear;
    background: white;
    border-radius: 20px;
    width: 600px;
    height: 600px;
    overflow: hidden;
    /* margin: 0 auto; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    z-index: 22;
}

.img_show {
    width: 100%;
    transform: scale(1);
}

.hidden {
    display: none;
    position: fixed;
    background: rgba(0,0,0,0.3);
    top: 0px;
    bottom: 0px;
    width: 100%;
}
.showIt {
    transform-origin: center;
    -webkit-transform:translate(-50%, -50%) scale(1) ;
    transform:translate(-50%, -50%) scale(1) ;
}
/* @keyframes aniShowIt{
    from{transform: scale(0);}
    to{transform: scale(1);}
} */

 

js部分：

(function(window) {
    var li_item            = document.getElementsByClassName('li_item')[0];
    var show_pic_wrapp   = document.getElementsByClassName('show_pic_wrapp')[0];
    var hidden            = document.getElementsByClassName('hidden')[0];    
    var img_show            = document.getElementsByClassName('img_show')[0];
    // var pic_wrapp_width  = parseInt(window.getComputedStyle(show_pic_wrapp,null).width);
    var initWidth         = 100;
    var sign             = true;//标记鼠标是否停留在图片容器中
    var SIZE             = 0.2;//滚轮滚动刻度
    var MAX_SIZE          = 5;//设置最大缩放
    var MIN_SIEZE         = 0.5;//设置最小缩放
    var DEG                 = 0;//设置初始角度
    var degArr              = ['0deg','90deg','180deg','270deg','360deg'];//设置初始角度数组
    
    //图片容器点击
    li_item.addEventListener("click",function(){
        //弹出图片组件
        hidden.style.cssText = 'display: block;'
        //图片宽度初始化
        img_show.style.cssText = 'width:'+initWidth+'% ;'
        show_pic_wrapp.className = 'show_pic_wrapp showIt'
    })
    //遮罩层点击
    hidden.onclick = function(e){
        e.stopPropagation();
        e.preventDefault()
        //点击蒙层隐藏
        this.style.cssText = 'display:none;'
        show_pic_wrapp.className= 'show_pic_wrapp'
    }
    //图片点击
    show_pic_wrapp.onclick = function(e){
        e.stopPropagation();
        e.preventDefault();
        DEG++
        //转动角度数组
        
        var newDeg = degArr[DEG%4];
        console.log(newDeg)
        img_show.style.cssText = 'transform: rotate('+newDeg+') scale('+getTransform(img_show)+');'
        
    }
    //监听鼠标移入
    show_pic_wrapp.onmouseover = function(){
                    
        if(sign){
            this.onmousewheel = function (e) {
                // 计算图片与容器的比例
                // var newWidth = Math.floor((parseInt(window.getComputedStyle(img_show,null).width)/pic_wrapp_width)*100);
                var newWidth = getTransform(img_show);
                console.log('newWidth:'+newWidth)
                e = e || window.event;  
                if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
                    if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                       newWidth+=SIZE;
                    }  
                    if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                       newWidth-=SIZE; 
                    }  
                }            
                // //设置极限提示                                                    
                // if(newWidth                 //     alert("客官，我不能再小咯！")                
                // }else if(newWidth>MAX_SIZE){
                //     alert("客官，我不能再大咯！")        
                // }
                newWidth = Math.max(newWidth,MIN_SIEZE);
                newWidth = Math.min(newWidth,MAX_SIZE);
                img_show.style.cssText = 'transform: scale('+newWidth+');'
            } 
        }
        
    }
    //监听鼠标移除
    show_pic_wrapp.onmouseout = function(){
        sign = false;
    }
    /*
     @desc:获取el的transform属性值
     */
    function getTransform(el) {
      var st = window.getComputedStyle(el, null)
      var tr = st.getPropertyValue("-webkit-transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform") ||
        "FAIL"
      //这里获取的值是maxtri  需要先提取特定的值 然后再获取缩放值
      var values = tr.split('(')[1].split(')')[0].split(',')
      var a = values[0]
      var b = values[1]
    
      var scale = Math.sqrt(a * a + b * b)
      return scale
    }
})(window);