在viewer.js插件基础上添加查看原图的功能，并实现放大缩小，旋转 1.引入viewer模块2. 显示控件（固定结构）2.1其中`![]()
`标签中`data-original`表示原图的路径；`src`表示缩略图的路径。所以使用viewer.js插件，需要准备两种大小的图片。2.2 显示控件 3. 定义viewer控件4.显示效果5.添加查看原图按钮6. 添加放置原图的容器7.给查看原图添加事件8 全部代码
GitCode加速 https://gitcode.net/mirrors/fengyuanchen/viewerjs
1.引入viewer模块 2. 显示控件（固定结构） 2.1其中![]()
标签中data-original表示原图的路径；src表示缩略图的路径。所以使用viewer.js插件，需要准备两种大小的图片。
2.2 显示控件 1.固定结构2.将图片的alt值设置为索引，方便添加查看原图功能（根据索引值，确定原图链接）这里不一定设置为索引，命名与alt值相关也可以 
3. 定义viewer控件 Viewer(选择容器,{ url: ‘data-original’//字符串/函数 src 设置大图片的 url ,inline:false //布尔值 false 启用 inline 模式 ,button:true //布尔值 true 显示右上角关闭按钮（jQuery 版本无效） ,navbar:true //布尔值/整型 true 显示缩略图导航 ,title:true //布尔值/整型 true 显示当前图片的标题（现实 alt 属性及图片尺寸） ,toolbar:true //布尔值/整型 true 显示工具栏 ,tooltip:true //布尔值 true 显示缩放百分比 ,movable :true//布尔值 true 图片是否可移动 ,zoomable:true //布尔值 true 图片是否可缩放 ,rotatable:true //布尔值 true 图片是否可旋转 ,scalable:true //布尔值 true 图片是否可翻转 ,transition:true //布尔值 true 使用 CSS3 过度 ,fullscreen:true// 布尔值 true 播放时是否全屏 ,keyboard:true //布尔值 true 是否支持键盘 ,interval:5000 //整型 5000 播放间隔，单位为毫秒 ,zoomRatio:0.1 //浮点型 0.1 鼠标滚动时的缩放比例 ,minZoomRatio:0.01 //浮点型 0.01 最小缩放比例 ,maxZoomRatio:100 //数字 100 最大缩放比例 ,zIndex : 2015 //设置图片查看器 modal 模式时的 z-index ,zIndexInline : 0 //设置图片查看器 inline 模式时的 z-index ,built:function (){ //回调函数，viewer函数初始化之前调用（只调用一次） } ,build:function (){ //回调函数，viewer.js文件加载完成后调用 } ,show:function () { //回调函数，加载展示图层前调用 } ,shown:function () { //回调函数，加载展示图层完成后调用 } ,hide:function () { //回调函数，点击关闭展示按钮时调用 } ,hidden:function () { //回调函数，展示图层关闭前调用 } ,view:function () { //回调函数，加载展示图片前调用 } ,viewed:function () { //回调函数，展示图片加载完成时调用 }}); var viewer = new Viewer(document.getElementById(‘jq22’), { url: ‘data-original’}); 4.显示效果
5.添加查看原图按钮
在这个基础上再添加一个查看原图的功能，需要对图片在进行一次压缩。一张图片对应三个尺寸：最小缩略图、中图、原图。 定义一个按钮
查看原图
样式设置，特别注意z-index。显示级别高于viewerjs，不然会被遮挡
#viewOrg{ position: absolute; bottom: 200px; right: 200px; z-index:2016; display: none;}
显示效果 
6. 添加放置原图的容器
同样要注意z-index:19999；高于viewerjs
![]()
提示: 点击空白处进行图片旋转; 点击图片本身进行返回; 鼠标滚动进行放大缩小。
7.给查看原图添加事件
1.查看原图只有在显示中图的时候显示；
hide:function () { //回调函数，点击关闭展示按钮时调用 $(‘#viewOrg’).hide(); } viewed:function () { //回调函数，展示图片加载完成时调用 $(‘#viewOrg’).show(); s=$(“.viewer-canvas”).find(‘img’).eq(0)[0].alt; }
2.点击查看原图按钮，显示原图。 3.显示的原图与中图一一对应。
//添加“查看原图”按钮点击事件。 $(“#viewOrg”).click(function(){ var srcOrigin=’img/tibet-‘+parseInt(s)+’.jpg’; var _this = $(this);//将当前的pimg元素作为_this传入函数 $(“#bigimg”).css({‘width’: ‘100%’, ‘height’: ‘100%’}); imgShow(“#outerdiv”, “#innerdiv”, “#bigimg”, _this,srcOrigin); base_scrollBar = getScrollTop(); } );
显示图片的方法imgShow()参考https://blog.csdn.net/a649344475/article/details/120729029
最终效果 
8 全部代码 JS/jQuery图片查看器viewer.js演示-默认效果_jq22* { margin: 0; padding: 0;}#jq22 { width: 700px; margin: 0 auto; font-size: 0;}#jq22 li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}#jq22 li img { width: 100%;}#viewOrg{ position: absolute; bottom: 200px; right: 200px; z-index:2016; display: none;}默认效果查看原图 ![]()
提示: 点击空白处进行图片旋转; 点击图片本身进行返回; 鼠标滚动进行放大缩小。
var base_scrollBar = 0; function imgShow(outerdiv, innerdiv, bigimg, _this,src) { $(‘#vOrig’).hide(); var rIndex = 0; // var src = _this.attr(“src”); //获取当前点击的pimg元素中的src属性 $(bigimg).attr(“src”, src); //设置#bigimg元素的src属性 /*获取当前点击图片的真实大小，并显示弹出层及大图*/ $(“![]()
“).attr(“src”, src).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”); if (rIndex > 3) { rIndex = 0; } rIndex += 1; $(bigimg).css(‘transform’, ‘rotate(‘ + 90 * rIndex + ‘deg)’); }); $(innerdiv).click(function() { // 点击图片淡出消失弹出层 rIndex = -1; $(outerdiv).fadeOut(“fast”); window.scrollTo(0, base_scrollBar); $(‘#vOrig’).show(); }); } function getScrollTop(){ // 获取滚动条距离顶部位置 var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; }else if(document.body){ scrollTop=document.body.scrollTop; } return scrollTop; } // 向上滚动放大图片，向下滚动缩小图片 function picture_change(s){ //var div = document.getElementById(“innerdiv”); if($(“#outerdiv”).css(‘display’)==’block’){ var tw = $(“#bigimg”).width(),th=$(“#bigimg”).height(); var cw = $(window).width(),ch=$(window).height(); if(tw>0 && th >0){ $(“#bigimg”).width(tw*s); $(“#bigimg”).height(th*s); //div.style.left = div.style.left*(2-s); //div.style.top = div.style.top*(2-s); $(“#innerdiv”).css({‘left’: (cw-tw*s)/2+’px’,’top’: (ch-th*s)/2+’px’}); } } } var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 picture_change(1.1); } if (e.wheelDelta < 0) { //当滑轮向下滚动时 picture_change(0.9); } } else if (e.detail) { //Firefox滑轮事件 if (e.detail> 0) { //当滑轮向下滚动时 picture_change(0.9); } if (e.detail< 0) { //当滑轮向上滚动时 picture_change(1.1); } } } /*IE、Opera注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc); } //Firefox使用addEventListener添加滚轮事件 if (document.addEventListener) {//firefox document.addEventListener('DOMMouseScroll', scrollFunc, false); } //Safari与Chrome属于同一类型 window.onmousewheel = document.onmousewheel = scrollFunc; var s='';var viewer = new Viewer(document.getElementById('jq22'), { url: 'data-original'//字符串/函数 src 设置大图片的 url ,inline:false //布尔值 false 启用 inline 模式 ,button:true //布尔值 true 显示右上角关闭按钮（jQuery 版本无效） ,navbar:true //布尔值/整型 true 显示缩略图导航 ,title:true //布尔值/整型 true 显示当前图片的标题（现实 alt 属性及图片尺寸） ,toolbar:true //布尔值/整型 true 显示工具栏 ,tooltip:true //布尔值 true 显示缩放百分比 ,movable :true//布尔值 true 图片是否可移动 ,zoomable:true //布尔值 true 图片是否可缩放 ,rotatable:true //布尔值 true 图片是否可旋转 ,scalable:true //布尔值 true 图片是否可翻转 ,transition:true //布尔值 true 使用 CSS3 过度 ,fullscreen:true// 布尔值 true 播放时是否全屏 ,keyboard:true //布尔值 true 是否支持键盘 ,interval:5000 //整型 5000 播放间隔，单位为毫秒 ,zoomRatio:0.1 //浮点型 0.1 鼠标滚动时的缩放比例 ,minZoomRatio:0.01 //浮点型 0.01 最小缩放比例 ,maxZoomRatio:100 //数字 100 最大缩放比例 ,zIndex : 2015 //设置图片查看器 modal 模式时的 z-index ,zIndexInline : 0 //设置图片查看器 inline 模式时的 z-index ,built:function (){ //回调函数，viewer函数初始化之前调用（只调用一次） } ,build:function (){ //回调函数，viewer.js文件加载完成后调用 } ,show:function () { //回调函数，加载展示图层前调用 } ,shown:function () { //回调函数，加载展示图层完成后调用 } ,hide:function () { //回调函数，点击关闭展示按钮时调用 $('#viewOrg').hide(); } ,hidden:function () { //回调函数，展示图层关闭前调用 } ,view:function () { //回调函数，加载展示图片前调用 } ,viewed:function () { //回调函数，展示图片加载完成时调用 $('#viewOrg').show(); s=$(".viewer-canvas").find('img').eq(0)[0].alt; }}); //添加“查看原图”按钮点击事件。 $("#viewOrg").click(function(){ var srcOrigin='img/tibet-'+parseInt(s)+'.jpg'; var _this = $(this);//将当前的pimg元素作为_this传入函数 $("#bigimg").css({'width': '100%', 'height': '100%'}); imgShow("#outerdiv", "#innerdiv", "#bigimg", _this,srcOrigin); base_scrollBar = getScrollTop(); } );body { margin: 0; border-left: 200px solid #ccc;}h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;}.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}.menu a:hover { background-color: #eee;}.menu .cur { color: #000; background-color: #fff !important;}.vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}.vad a:hover { color: #fff; background-color: #000;}.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}.code { position: relative; margin-top: 100px; padding-top: 41px;}.code h3 { position: absolute; top: 0; z-index: 10; width: 100px; height: 40px; font: 16px/40px "Microsoft Yahei"; text-align: center; cursor: pointer;}.code .cur { border: 1px solid #f0f0f0; border-bottom: 1px solid #f8f8f8; background-color: #f8f8f8;}.code .h31 { left: 0;}.code .h32 { left: 102px;}.code .h33 { left: 204px;}.code .h34 { left: 306px;}.code ol { padding: 0;}.code { width: 800px; margin-left: auto; margin-right: auto;}pre { padding: 15px 0; border: 1px solid #f0f0f0; background-color: #f8f8f8;}.f-dn { display: none;} 1、默认效果 2、jQuery版本 3、回调函数 4、自定义方法
admin 
