之前博客用过一些第三方的图片展示插件，比如fancybox，但是用久了感觉还是有点问题，反正自己用着不舒服，而且这些第三方插件大都使用jQuery，就想自己写个原生就是实现的图片展示。

网上看了一些代码，实现起来还是很简单的，大概思路就在每个图片的点击事件中添加图层与图片副本。

具体的实现代码就一点点了，100多行原生js。

用法

• 直接在页面引入js

<script type="text/javascript"  src="https://me.idealli.com/js/src/image.js"></script>

以下是js内容：

let container = document.documentElement||document.body;
let img,div,src,btnleft,btnright;
var imgid=0;
let x,y,w,h,tx,ty,tw,th,ww,wh;
let closeMove=function(){
    if(div==undefined){
        return false;
    }
    div.style.opacity=0;
    img.style.height=h+"px";
    img.style.width=w+"px";
    img.style.left=x+"px";
    img.style.top=(y - container.scrollTop)+"px";
    // 延迟移除dom
    setTimeout(function(){
        div.remove();
        img.remove();
        btnright.remove();
        btnleft.remove();
    },100);

};

let closeFade=function(){
    if(div==undefined){
        return false;
    }
    div.style.opacity=0;
    img.style.opacity=0;
    // 延迟移除dom
    setTimeout(function(){
        div.remove();
        img.remove();
        btnright.remove();
        btnleft.remove();
    },100);
};


// 监听滚动关闭层
document.addEventListener("scroll",function(){
    closeFade();
});
document.querySelectorAll("img").forEach(v=>{

	if (v.parentNode.localName!=a) {
		v.id=imgid;
		imgid++;
		    v.addEventListener("click",function(e){ // 注册事件
	        // 记录小图的位置个大小
	        x=e.target.offsetLeft;
	        y=e.target.offsetTop;
	        w=e.target.offsetWidth;
	        h=e.target.offsetHeight;
	         src=e.target.src;
	        id=e.target.id;
	        // 创建遮罩层
	        div=document.createElement("div");
	        div.style.cssText=`
	            position:fixed;
	            left:0;
	            top:0;
	            bottom:0;
	            right:0;
	            background-color: rgba(25,25,25,0.8);
	            z-index:99999999;
	            transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	        `;
	        document.body.appendChild(div);
	        setTimeout(function(){
	            div.style.opacity=1;
	        },0);
	        // (此处可以加loading)

	        // 创建副本
	        img=new Image();
	        btnright=document.createElement("button");
	        btnleft=document.createElement("button");
	        img. src=src;
	        btnleft.style.cssText=`
			    position:fixed;
			    border-radius: 50%;;
			    left:${x - 20}px;
			    top:${y - container.scrollTop + h/2}px;
			    width:50px;
			    height:50px;
			    border: 0px;
			    background-color: rgba(200,200,200,0.8);
			    font-size: 20px;
			    z-index: 999999999;
			    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
			`;
			btnright.style.cssText=`
			    position:fixed;
			    border-radius: 50%;
			    left:${x + w + 20}px;
			    top:${y - container.scrollTop + h/2}px;
			    width:50px;
			    border: 0px;
			    height:50px;
			    font-size: 20px;
			    background-color: rgba(200,200,200,0.8);
			    z-index: 999999999;
			    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
			`;
			btnleft.innerText="<";
			btnright.innerText=">";

			img.style.cssText=`
			    position:fixed;
			    border-radius: 12px;
			    left:${x}px;
			    top:${y - container.scrollTop}px;
			    width:${w}px;
			    height:${h}px;
			    z-index: 999999999;
			    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
			    opacity:0;
			`;



	        btnleft.onclick=function(){
	        	if(id===0){
	        		alert("已经是第一张了！");
	        		return;
	        	}
	        	var left=document.getElementById(id-1);
	        	img. src=left.src;
	        	x=left.offsetLeft;
	        	y=left.offsetTop;
	      		w=left.offsetWidth;
	        	h=left.offsetHeight;
	        	id--;
	        }
	        btnright.onclick=function(){
	        	id++;
	        	if(id>=imgid){
	        		alert("已经是最后一张了！");
	        		return;
	        	}
	        	var right=document.getElementById(id);
	        	img. src=right.src;
	        	x=right.offsetLeft;
	        	y=right.offsetTop;
	      		w=right.offsetWidth;
	        	h=right.offsetHeight;
	        }
	        img.onload=function(){
	            document.body.appendChild(img);
	            document.body.appendChild(btnright);
	            document.body.appendChild(btnleft);

	            // 浏览器宽高
	            wh=window.innerHeight;
	            ww=window.innerWidth;

	            // 目标宽高和坐标
	            if(w/h<ww/wh){
	            	th=wh-80;
		            tw=w/h*th >> 0;
		            tx=(ww - tw) / 2;
		            ty=40;	            	
	            }
	            else{
	            	tw=ww*0.8;
	            	th=h/w*tw >> 0;
	            	tx=ww*0.1;
	            	ty=(wh-th)/2;
	            }

	            // 延迟写入否则不会有动画
	            setTimeout(function(){
	                img.style.opacity=1;
	                img.style.height=th+"px";
	                img.style.width=tw+"px";
	                img.style.left=tx+"px";
	                img.style.top=ty+"px";
	                btnleft.style.left=(tx-90)+"px";
	                btnleft.style.top=(ty+th/2)+"px";
	                btnright.style.left=(tx+tw+40)+"px";
	                btnright.style.top=(ty+th/2)+"px";
	                // 点击隐藏
	                div.onclick=img.onclick=closeMove;
	            },10);
	        };
	    });//end event
	}
});//end forEach