在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");//獲取容器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();}} } 復制代碼

效果圖

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

總結

以上是生活随笔為你收集整理的图片放大镜插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。