js源生实现图片点击弹出放大效果

参考https://blog.csdn.net/qq_36375934/article/details/78952485 的弹出框查看大图，同时总结自己遇到的问题，做个笔记

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><link rel="stylesheet" href="${ctx}/resources/common/layui/css/layui.css"><link rel="stylesheet" href="${ctx}/resources/common/lightbox2/css/lightbox.min.css">
</head>
<body>
<%--js源生大图的是弹出框的样式--%>
<div id="outerdiv"style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src=""/></div>
</div><script src=js/jquery.js></script><script src=js/index.js></script></body>
</html>

JS代码

只截取的append的html：
var html = '';
html += '<li>';
if (suffix == 'jpg') {//data-lightbox="'+ box1 +'" 是引用框架lightbox进行图片轮播查看大图,只需要在jsp里面引入lightbox的css和js，// 然后在需要查看的标签加上data-lightbox="box1"即可，这里用了就可以不用源生点击查看大图了，二者选其一html += ' <a href="' + encodeURI(show) + '"  data-lightbox="'+ box1 +'"  class="lookBigImg">'
} else {html += ' <a href="' + encodeURI(show) + '" target="_blank" download="'+ filename +'" title="">'
}//encodeURI(img)编码返回的超链接，以防特殊字符不能加载，我遇到的是上传的图片名带有特殊符号导致加载不出来html += '  <div>'+ '<img class="imgClass" src="' + (img.indexOf("http")===0?encodeURI(img):img) + '" alt="">'+ '<input type="hidden" name="annexValue" value="' + ossPath + '">'+ ' </div>'+ '</a>'+ '<a ><p>' + filename + '</p></a>'+ '<span class="removeFile"></span>'+ '</li>';
$("." + suffix + "_div").append(html);
if (del) {//上传的调removeFile();// if (suffix == 'jpg'){//上传是图片类才绑定事件//     addLookBigImgClick();// }
} else {//回填数据调$(".removeFile").hide();
}

功能实现：

//这是js源生查看大图写法
function addLookBigImgClick() {//查看大图，用到off("click")防止重复绑定click$(".lookBigImg").off("click").on("click",function () {var _this = $(this).find(".imgClass");//通过this来找自己的img标签imgClass，不能直接$(".imgClass")theLookBigImg($("#outerdiv"), $("#innerdiv"), $("#bigimg"),_this);});
}/*** 查看大图*/
function theLookBigImg(outerdiv, innerdiv, bigimg, _this) {var src = _this.attr("src");//获取当前点击的pimg元素中的src属性$(bigimg).attr("src", src);//设置#bigimg元素的src属性/*获取当前点击图片的真实大小，并显示弹出层及大图*/console.log(src);$("<img/>").attr("src", src).on('load',function(){var windowW = $(window).width();//获取当前窗口宽度var windowH = $(window).height();//获取当前窗口高度var realWidth = this.width;//获取图片真实宽度var realHeight = this.height;//获取图片真实高度var imgWidth, imgHeight;var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放if(realHeight>windowH*scale) {//判断图片高度imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度imgWidth = windowW*scale;//再对宽度进行缩放}} else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度} else {//如果图片真实高度和宽度都符合要求，高宽不变imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放var w = (windowW-imgWidth)/2;//计算图片与窗口左边距var h = (windowH-imgHeight)/2;//计算图片与窗口上边距$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg});$(outerdiv).click(function(){//再次点击淡出消失弹出层$(this).fadeOut("fast");});
}

js源生实现图片点击弹出放大效果相关推荐

html注释图案,jQuery图片点击弹出遮罩层标记注释特效
这是一款简单的.非常实用的jQuery图片点击弹出遮罩层标记注释特效. HTML html结构非常简单.使用一个portfolio作为wrapper,在里面可以添加多个portfolio_item. ...
微信html 全屏显示,关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. 调用微信图片浏览器的函数 functio ...
h5点击图片自动放大_关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson ...
jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...
js实现点击图片在屏幕中间弹出放大效果
效果图点击图片后关键代码 html <div><img height="100" width="100" src="https: ...
js常见问题之为什么点击弹出的i总是最后一个
在前端群里看见过很多人问过这个问题,今晚又有人问了这个问题,所以写篇文章整理一下.首先看一下代码,点击li之后弹出当前li所对应的索引值.于是很多人刷刷刷写出了下面的代码. var aLi = doc ...
html,bootstrap,js，jquery图片点击模态窗口放大图片，可以滚动常看长图
完整例子的html,直接打开可看到效果 <!DOCTYPE html> <html> <head><title>bootstrap 图片查看</t ...
JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片...
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
html基础总结4-实现点击图片弹出放大图片--不用插件
实现点击图片弹出放大图片--不用插件 <td width="350"> <img height="100" width="100&q ...

js源生实现图片点击弹出放大效果

js源生实现图片点击弹出放大效果相关推荐

最新文章

热门文章