手寫插件——查看圖片放大鏡(1)

在web開發中，經常使用到的一個插件-圖片查看器！目前是版本V1.0.待後續更新。目前功能就是點擊查看圖片，能夠查看圖片並能夠放大查看。上代碼~！

CSS代碼

*{padding:0;margin: 0;}
ul li{list-style: none;}
.page-wrapper{width:1080px;overflow: hidden;margin: 0 auto;}
.clearfix:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0}
.clearfix{*zoom: 1}
.hide{display: none;}
.format{margin:50px 0}
.check-ul{margin-left:-20px;}
.check-ul li{float: left;border:1px solid #e5e5e5;height:200px;width:150px;overflow:hidden;margin-left: 20px;cursor: -webkit-zoom-in;}
.check-ul li img{display: block;height:200px;width:150px;overflow:hidden}
.checkImg-box .mask{position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.6);width:100%;height:100%;z-index: 2;}
.check-container{position: absolute;top: 0;left:0;overflow:hidden;background-color: #000;z-index: 3;}
.check-container img{cursor: -webkit-zoom-in;position: absolute;}
.r{position:relative}
#zoomIn_Close{position: absolute;top: 0;right: 0;width:64px;height:64px;z-index: 3;}
複製代碼

HTML代碼

<div class="page-wrapper">
    <div class="format">
        <ul class="check-ul" id="check_Ul">
            <li><img src=https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" alt="" title=""/></li> <li><img src="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" alt="" title=""/></li> <li><img src="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_m.jpg" alt="" title=""/></li> </ul> </div> </div> 複製代碼

JavaScript

window.onload=function(){
    let [tag,getTagimg_Val,view_width,view_height,container_width,container_height,setview_Width,setview_Height,zoomIn_scale,disX,disY,l,t]=["","","","","","","","",false,0,0,0,0];
    let [getTagimg_Width,getTagimg_Height]=['',''];
    var checkImg={
        init:function(){
        let box1= document.createElement("div");
        box1.id = 'swithShow';  
        box1.className = 'checkImg-box'; 
        
        let box2= document.createElement("div"); 
        box2.className = 'mask'; 
        
        let box3= document.createElement("img"); 
        box3.id = 'zoomIn_Close';  
        box3.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADJ0lEQVR4Xu2b4ZHTMBCF31YAHXBUAFQAVAAdcFQAVAAlQAVwFXBUcHQAHUAH0MEyzyNlFMWObWklWyiayZ+bi6L99Hb3SXFEVRUdD7kAUP0N4EGvIqACvgN4egHQKYGLAlT1FsCLTgUAKuADgPc9A7gG8LlnAM8A3PUM4D6AP90CYOCq+hfAvR4hiAPQrRnyAD4CeNOzAl4C+NozgG4L4ZACFerAjYhcqypbLp1nasG9AfAWwBUA1q3UeQ5iDwGUdIRPROSnA/04cfEDxGDDTCx8CKCkIXonIiy0Xm1rIcTBM2V/OCVkla4DgAp+4LWIfEmAMBY8nSshZo8YABf4KnvW6QnWQigaPJcZAyBVSqvkWAqhePAnAFwa1LgjnINQJfgpACW7QaisKQi3UbVnwTPL+VjaRyngFMAe+6tkDgRzxxCuRIQK9N2iaPCjCnAQTHrsQohHEGoGfw5ASU8wxuW5iNDZHUat6/qTFAh2oNYR+ajgBZ+/1iwtFNzxv50DUEMFo8HXhDAJwNWCkiqYanWfEh2jrQIcgFIqmOvzcz4hKdixN51VQKGOMBe8X2cVCEsA0BfwKJt99gawNPhqEGYBOBVYuMO1wVeBsAiAg0AVPEpMvm8iwnvHVIc3lg4mh7Y1AHIK4kNvcVU11d7GEEw61GIATgWp1+fD4jOCP0kHVeV5hfUpa6wCkJkK3DEuOHfRVvMM4FIAWHaFrN2zePNqAE4F/80XKUkAMuuBxcaZzZEMwEEofYlqFujURFkAHASTdlQ80okPsADAvk4IqSZpq9jTusDYal1/bxJCtgICe8v2yLvEppRgBsDVg+bSwRRAAIFKaOL5Y3MAQUo00SKLAWjFLBUFENhmqsHiRsm8ZRYH4CDstkNUARDUhdT7BPOd9xNWBeDUwJslgtiFX6gOIFADL1r5xNemtWEzAEFtoBo2+8HGpgACNTAtqIjq5mkXALYEsSsAEQjWh+KpsUsA0QmT94+EUeTHnbsGEDZ/VeUDEwRBIGadoxkAEQwWTf/KKpxNAohg8A7Cw6BK+FqskOYBTHlk92i+/yaKUAjKD/59qCn/ACl1u1AA87JGAAAAAElFTkSuQmCC';
        
        let box4= document.createElement("div");
        box4.id = 'check_Container';  
        box4.className = 'check-container'; 
        
        let box5= document.createElement("div");
        box5.id = 'img_Container';  
        box5.className = 'r';
        
        let box6= document.createElement("img");
        box6.id = 'zoomIn_Img';  
        
        box1.appendChild(box2);
        box1.appendChild(box3);
        box1.appendChild(box4);
        box4.appendChild(box5);
        box4.appendChild(box6);
        document.body.appendChild(box1);
        
        /*關閉彈窗*/
        box3.addEventListener("click",function(){
        document.body.removeChild(box1);
        },false);
        /*點擊圖片-放大*/
        box6.addEventListener("click",function(){
        if(zoomIn_scale===false){
        zoomIn_Img.style.width=getTagimg_Width+'px';
        zoomIn_Img.style.height=getTagimg_Height+'px';
        tag.style.height=getTagimg_Height>container_height?container_height+'px':getTagimg_Height+'px' //限制容器高度
        zoomIn_Img.style.cursor='-webkit-grab'; //改變鼠標樣式
        zoomIn_scale=true;
        checkImg.mouseMoveFun(zoomIn_scale); //啓動滑動
        }else{
        zoomIn_Img.style.width=parseInt(setview_Width)+'px'; //恢復初始化寬度
        tag.style.height=setview_Height;
        zoomIn_Img.style.height=setview_Height;
        zoomIn_Img.style.cursor='-webkit-zoom-in';//改變鼠標樣式
        zoomIn_scale=false;
        checkImg.mouseMoveFun(zoomIn_scale);//啓動滑動
        }
        checkImg.setCenter();
        },false);
    },
    count:function(){
        tag=document.getElementById("check_Container");//獲取容器id
        view_width=document.documentElement.clientWidth; //瀏覽器可見寬度
        view_height=document.documentElement.clientHeight;//瀏覽器可見高度
        container_width=parseInt(view_width*0.8); //80%*可見寬度
        container_height=parseInt(view_height*0.8);//80%*可見高度
        getTagimg_Val = window.getComputedStyle(zoomIn_Img, null); //獲取目標圖片屬性
        getTagimg_Width=parseInt(getTagimg_Val.width);//圖片原始寬度
        getTagimg_Height=parseInt(getTagimg_Val.height);//圖片原始高度
        setview_Width=container_width<(getTagimg_Width*0.8)?container_width+'px':(getTagimg_Width*0.8)+'px'; //初始化寬度
        setview_Height=container_height<(getTagimg_Height*0.8)?container_height+'px':(getTagimg_Height*0.8)+'px'; //初始化高度
        tag.style.width=setview_Width;
        tag.style.height=setview_Height;
        zoomIn_Img.style.width=setview_Width;
        zoomIn_Img.style.height=setview_Height;
        checkImg.setCenter();
    },
    setCenter:function(){
        let getTag_Val = window.getComputedStyle(tag, null); //獲取目標屬性
        let getTag_Width=parseInt(getTag_Val.width);//目標寬度
        let getTag_Height=parseInt(getTag_Val.height);//目標高度
        tag.style.left=(view_width-parseInt(getTag_Width))/2+'px';
        tag.style.top=(view_height-parseInt(getTag_Height))/2+'px';
    },
    mouseMoveFun:function(flag){
            if(zoomIn_scale===true){
                zoomIn_Img.onmousedown=function(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-zoomIn_Img.offsetLeft;
                disY=oEvent.clientY-zoomIn_Img.offsetTop;
                document.onmousemove=function (ev){
                var oEvent=ev||event;
                l=oEvent.clientX-disX;
                t=oEvent.clientY-disY;
                zoomIn_Img.style.left=l+'px';
                zoomIn_Img.style.top=t+'px';
                zoomIn_scale=false;
            };
            document.onmouseup=function (){
                zoomIn_Img.click=null;
                var oEvent=ev||event;
                let count_right=-(getTagimg_Width-parseInt(tag.style.width));
                let count_bottom=-(getTagimg_Height-parseInt(tag.style.height));
                if(l>0){
                zoomIn_Img.style.left='0px';
                }else if(l<count_right){
                zoomIn_Img.style.left=count_right+'px';
                }
                if(t>0){
                zoomIn_Img.style.top='0px';
                }else if(t<count_bottom){
                zoomIn_Img.style.top=count_bottom+'px';
                }
                document.onmousemove=null;
                document.onmouseup=null;
                };
                return false;
            }
        }else{
            zoomIn_Img.onmousedown=null;
            document.onmousemove=null;
            document.onmouseup=null;
            zoomIn_Img.style.left='0px';
            zoomIn_Img.style.top='0px';
            }
        },
    }
    //添加圖片列表的點擊事件
    let tag_ul=document.getElementById("check_Ul");
    let tag_li=tag_ul.getElementsByTagName("li")//獲取圖片元素集
    for(let i=0;i<tag_li.length;i++){
    	tag_li[i].onclick=function(){
    		checkImg.init();
    		zoomIn_Img.src =tag_li[i].getElementsByTagName("img")[0].src;
    		checkImg.count();
    	}
    }
}
複製代碼

效果圖

趁着假期以前整理一下，若有代碼疑問或者錯誤的，歡迎指教。請期待升級版！