在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=/3894/15008518202_c265dfa55f_h.jpg" alt="" title=""/></li><li><img src="/5591/15008867125_b61960af01_h.jpg" alt="" title=""/></li><li><img src="/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");//获取容器idview_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();}}}复制代码
