在viewer.js插件基础上添加查看原图的功能，并实现放大缩小，旋转
GitCode加速 https://gitcode.net/mirrors/fengyuanchen/viewerjs
1.引入viewer模块
<script src="js/viewer.min.js"></script>
<link rel="stylesheet" href="css/viewer.min.css">
2. 显示控件（固定结构）
2.1其中<img>标签中data-original表示原图的路径；src表示缩略图的路径。所以使用viewer.js插件，需要准备两种大小的图片。
2.2 显示控件
1.固定结构<ul><li></li></ul>
2.将图片的alt值设置为索引，方便添加查看原图功能（根据索引值，确定原图链接）这里不一定设置为索引，命名与alt值相关也可以
<ul id="jq22">
<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="1"></li>
<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="2"></li>
<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="3"></li>
<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="4"></li>
<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="5"></li>
<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="6"></li>
</ul>
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.添加查看原图按钮
在这个基础上再添加一个查看原图的功能，需要对图片在进行一次压缩。一张图片对应三个尺寸：最小缩略图、中图、原图。
定义一个按钮
<button id="viewOrg">查看原图</button>
样式设置，特别注意z-index。显示级别高于viewerjs，不然会被遮挡
#viewOrg{
position: absolute;
bottom: 200px;
right: 200px;
z-index:2016;
display: none;
}
显示效果
6. 添加放置原图的容器
同样要注意z-index:19999；高于viewerjs
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.8);z-index:19999;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
<p style="background:white; position: absolute; top: 20px;left: 20px;margin: auto;text-align: center;">提示: 点击空白处进行图片旋转; 点击图片本身进行返回; 鼠标滚动进行放大缩小。</p>
</div>
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 全部代码
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-默认效果_jq22</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { 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;
}
</style>
</head>
<body>
<h1>默认效果</h1>
<button id="viewOrg">查看原图</button>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.8);z-index:20156;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
<p style="background:white; position: absolute; top: 20px;left: 20px;margin: auto;text-align: center;">提示: 点击空白处进行图片旋转; 点击图片本身进行返回; 鼠标滚动进行放大缩小。</p>
</div>
<ul id="jq22">
<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="1"></li>
<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="2"></li>
<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="3"></li>
<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="4"></li>
<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="5"></li>
<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="6"></li>
</ul>
<script src="js/viewer.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
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属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
$("<img/>").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();
}
);
</script>
<!-- 以下信息与演示无关，可不必理会 -->
<style>
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;}
</style>
<div class="menu">
<a class="cur" href="index.html">1、默认效果</a>
<a href="index2.html">2、jQuery版本</a>
<a href="index3.html">3、回调函数</a>
<a href="index4.html">4、自定义方法</a>
</div>
</body>
</html>
2694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
