基于JS如何实现点击图片在弹出层显示大图效果
导读：本文共5485字符，通常情况下阅读需要18分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：这篇“基于JS如何实现点击图片在弹出层显示大图效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“基于JS如何实现点击图片在弹出层显示大图效果”文章吧。先是html部分：<div><imgsrc="https://guanchao.site/uploads... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。这篇“基于JS如何实现点击图片在弹出层显示大图效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“基于JS如何实现点击图片在弹出层显示大图效果”文章吧。
先是html部分：
<div><imgsrc="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg"alt=""id="plus"></div><!--弹窗部分代码--><divid="outerdiv"><divid="innerdiv"><imgid="bigimg"src=""/></div></div><!--弹窗部分代码-->
Js部分：
$(function(){$("#plus").click(function(){var_this=$(this);//将当前的pimg元素作为_this传入函数imgShow("#outerdiv","#innerdiv","#bigimg",_this);});});functionimgShow(outerdiv,innerdiv,bigimg,_this){varsrc=_this.attr("src");//获取当前点击的pimg元素中的src属性$(bigimg).attr("src",src);//设置#bigimg元素的src属性/*获取当前点击图片的真实大小，并显示弹出层及大图*/$("<img/>").attr("src",src).load(function(){varwindowW=$(window).width();//获取当前窗口宽度varwindowH=$(window).height();//获取当前窗口高度varrealWidth=this.width;//获取图片真实宽度varrealHeight=this.height;//获取图片真实高度varimgWidth,imgHeight;varscale=0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放if(realHeight>windowH*scale){//判断图片高度imgHeight=windowH*scale;//如大于窗口高度，图片高度进行缩放imgWidth=imgHeight/realHeight*realWidth;//等比例缩放宽度if(imgWidth>windowW*scale){//如宽度扔大于窗口宽度imgWidth=windowW*scale;//再对宽度进行缩放}}elseif(realWidth>windowW*scale){//如图片高度合适，判断图片宽度imgWidth=windowW*scale;//如大于窗口宽度，图片宽度进行缩放imgHeight=imgWidth/realWidth*realHeight;//等比例缩放高度}else{//如果图片真实高度和宽度都符合要求，高宽不变imgWidth=realWidth;imgHeight=realHeight;}$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放varw=(windowW-imgWidth)/2;//计算图片与窗口左边距varh=(windowH-imgHeight)/2;//计算图片与窗口上边距$(innerdiv).css({"top":h,"left":w});//设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg});$(outerdiv).click(function(){//再次点击淡出消失弹出层$(this).fadeOut("fast");});}20220617补充：
PC端的图片放大使用上边的代码即可，但是在移动端的时候我们就需要用到两指放大缩小功能，然后还要加上单指移动的功能，
基础代码还是与上边一样，我就不废话了，直接上完整的代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><scriptsrc="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.0/jquery.min.js"type="application/javascript"></script></head><body><div><imgsrc="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png"alt=""class="plus"></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div><imgsrc="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png"alt=""class="plus"></div><!--弹窗部分代码--><divid="outerdiv"><divid="innerdiv"><imgid="bigimg"src=""/></div></div><!--弹窗部分代码--></body></html><scriptsrc="https://dev.mools.net/lims/web/common/js/vconsole.min.js"></script><script>//初始化varvConsole=newVConsole();$(function(){$(".plus").click(function(){var_this=$(this);//将当前的pimg元素作为_this传入函数imgShow("#outerdiv","#innerdiv","#bigimg",_this);//移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件vareleImg=document.querySelector('#innerdiv');varstore={scale:1};//定义移动端的初始位置varposition_top,position_left,pageX,pageY;//缩放事件的处理//事件开始eleImg.addEventListener('touchstart',function(event){event.preventDefault();//阻止默认事件，防止底部内容滚动//在触屏设备下，要判断是单指还是多指操作，可以通过event.touches数组对象的长度判断。vartouches=event.touches;varevents=touches[0];//单指varevents2=touches[1];//双指if(touches.length==1){//单指操作pageX=Number(events.pageX);pageY=Number(events.pageY);store.moveable=true;var_obj=$('#innerdiv');//.css获取的值是字符串position_left=parseFloat(_obj.css('left').split('px'));position_top=parseFloat(_obj.css('top').split('px'));}else{//第一个触摸点的坐标store.pageX=events.pageX;store.pageY=events.pageY;store.moveable=true;if(events2){store.pageX2=events2.pageX;store.pageY2=events2.pageY;}store.originScale=store.scale||1;}},{passive:false});//passive:false必须加上,否则控制台报错//开始移动document.addEventListener('touchmove',function(event){//event.preventDefault();//阻止默认事件，防止底部滚动if(!store.moveable){return;}vartouches=event.touches;varevents=touches[0];varevents2=touches[1];if(touches.length==1){varpageX2=Number(events.pageX);varpageY2=Number(events.pageY);//控制图片移动$('#innerdiv').css({'top':position_top+pageY2-pageY+'px',"left":position_left+pageX2-pageX+'px'})}else{//双指移动if(events2){//第2个指头坐标在touchmove时候获取if(!store.pageX2){store.pageX2=events2.pageX;}if(!store.pageY2){store.pageY2=events2.pageY;}//获取坐标之间的距离vargetDistance=function(start,stop){//用到三角函数returnMath.hypot(stop.x-start.x,stop.y-start.y);};//双指缩放比例计算varzoom=getDistance({x:events.pageX,y:events.pageY},{x:events2.pageX,y:events2.pageY})/getDistance({x:store.pageX,y:store.pageY},{x:store.pageX2,y:store.pageY2});//应用在元素上的缩放比例varnewScale=store.originScale*zoom;//最大缩放比例限制if(newScale>3){newScale=3;}//记住使用的缩放值store.scale=newScale;//图像应用缩放效果eleImg.style.transform='scale('+newScale+')';}}},{passive:false});//*/document.addEventListener('touchend',function(){store.moveable=false;deletestore.pageX2;deletestore.pageY2;});document.addEventListener('touchcancel',function(){store.moveable=false;deletestore.pageX2;deletestore.pageY2;});});//移动端手指页面结束});//遮罩层图片位置functionimgShow(outerdiv,innerdiv,bigimg,_this){//这是刚才判断是否PC端的函数事件varflag=IsPC();console.log(flag);varsrc=_this.attr("src");//获取当前点击的pimg元素中的src属性$(bigimg).attr("src",src);//设置#bigimg元素的src属性/*获取当前点击图片的真实大小，并显示弹出层及大图*/$("<img/>").attr("src",src).load(function(){//注意在使用这种方法获取窗口高度和宽度的时候,//务必在html页面最上方加上一句<!DOCTYPEhtml>,否则获取屏幕高度时会出问题varwindowW=$(window).width();//获取当前窗口宽度varwindowH=$(window).height();//获取当前窗口高度varrealWidth=this.width;//获取图片真实宽度varrealHeight=this.height;//获取图片真实高度varimgWidth,imgHeight;varscale=0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放if(realHeight>windowH*scale){//判断图片高度imgHeight=windowH*scale;//如大于窗口高度，图片高度进行缩放imgWidth=imgHeight/realHeight*realWidth;//等比例缩放宽度if(imgWidth>windowW*scale){//如宽度扔大于窗口宽度imgWidth=windowW*scale;//再对宽度进行缩放}}elseif(realWidth>windowW*scale){//如图片高度合适，判断图片宽度imgWidth=windowW*scale;//如大于窗口宽度，图片宽度进行缩放imgHeight=imgWidth/realWidth*realHeight;//等比例缩放高度}else{//如果图片真实高度和宽度都符合要求，高宽不变if(flag==false){imgWidth=realWidth;imgHeight=realHeight;}elseif(realWidth>=1000){//这里我怕图片太大又做了个判断imgWidth=realWidth;imgHeight=realHeight;}else{imgWidth=realWidth*2;imgHeight=realHeight*2;}}$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放varw=(windowW-imgWidth)/2;//计算图片与窗口左边距varh=(windowH-imgHeight)/2;//计算图片与窗口上边距$(innerdiv).css({"top":h,"left":w});//设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg});$(outerdiv).click(function(){//再次点击淡出消失弹出层$(this).fadeOut("fast");});};functionIsPC(){varsUserAgent=navigator.userAgent;if(sUserAgent.indexOf('Android')>-1||sUserAgent.indexOf('iPhone')>-1||sUserAgent.indexOf('iPad')>-1||sUserAgent.indexOf('iPod')>-1||sUserAgent.indexOf('Symbian')>-1){returnfalse;}else{returntrue;}}</script>效果如下图所示：
以上就是关于“基于JS如何实现点击图片在弹出层显示大图效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
本文：
基于JS如何实现点击图片在弹出层显示大图效果的详细内容，希望对您有所帮助，信息来源于网络。