原生js实现网页图片点击展示效果

小鸡
阅读753 喜欢3 javascript 更新2018-12-23

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

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

实现效果如下

兰州小红鸡

在录个动图,感谢可爱女朋友的出境

兰州小红鸡

也可以在我的相册里看

小鸡的相册

具体的实现代码就一点点了,100多行原生js
就不细讲了,直接贴出来吧
如何使用

在页面引入js

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

下面是代码

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;
data-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. data-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. data-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. data-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

下面是一些我的建站笔记汇总,平常做的小手工,希望对大家有帮助

hexo博客搭建以及next美化教程 原生js实现网页图片点击展示效果 用回valine评论系统,valine评论框样式美化 给hexo静态博客添加动态相册功能 hexo建站笔记之首页文章轮播图 模仿知乎的链接卡片 开始使用腾讯云图床 将公众号文章爬到hexo博客 使用腾讯云cdn加速博客 hexo建站笔记之彩色标签云 手动修改博客css样式,打造属于自己的博客样式