preview/showZoomImg展示图片插件+预览（改）
preview.js
//改动：<br/>
//1.$("body").append('<div id="addMaskLater"></div>')//姜佳泉添加-目的：二次调用时不会重复渲染
//2.$("#addMaskLater").remove();//姜佳泉添加-目的：二次调用时不会重复渲染
/**
* Created by WangCheng on 2020/9/24.
*/
function showZoomImg(domName, model) {
$("body").append('<div id="addMaskLater"></div>')//姜佳泉添加-目的：二次调用时不会重复渲染
var len = 0; //预览总图片数默认为零
var domImg; //img dom
var arrPic = new Array(); //定义一个数组src
var arrName = new Array(); //定义一个数组name
var num = 0; //当前预览的
var numNow = 1; //当前预览序号,最小为1
var leftPoint; //向左移动范围
var rightPoint; //右移动范围
var spin_n = 0; //旋转角度
var zoom_n = 1;//缩放 放大
showModel(model); //判断显示方式
function showModel(model) {
if(model == "img") { //图片直接查看
$("body").on('click', domName, function() {
domImg = $(this).parents('.zoomImgBox').find(domName);
len = domImg.length;
arrPic = [];
arrName = [];
for(var i = 0; i < len; i++) {
arrPic[i] = domImg.eq(i).attr("src"); //将所有img路径存储到数组中
if(domImg.eq(i).attr("data-caption")) {
arrName[i] = domImg.eq(i).attr("data-caption");
} else {
arrName[i] = '图片' + (i + 1);
}
}
var img_index = domImg.index(this); //获取点击的索引值
num = img_index;
numNow = num + 1;
addMaskLater(); //添加弹出dom
});
} else if(model == "text") {
$("body").on('click', domName, function() {
domImg = $(this).children('.zoomImg-hide-box').find('img');
len = domImg.length;
if(len < 1) {
layui.use('layer', function() {
var layer = layui.layer;
layer.msg('暂未上传资料图片');
});
return;
}
num = 0;
numNow = 1;
arrPic = [];
arrName = [];
for(var i = 0; i < len; i++) {
arrPic[i] = domImg.eq(i).attr("src"); //将所有img路径存储到数组中
if(domImg.eq(i).attr("data-caption")) {
arrName[i] = domImg.eq(i).attr("data-caption");
} else {
arrName[i] = '图片' + (i + 1);
}
}
addMaskLater();
})
}
}
//给body添加弹出层的html
function addMaskLater() {
var maskBg =
"<div class=\"mask-layer\">" +
"<div class=\"mask-layer-black\"></div>" +
"<div class=\"mask-layer-container\">" +
"<div class=\"mask-layer-imgbox\"></div>" +
"<div class=\"mask-layer-close\"></div>" +
"<div class=\"img-pre\"></div>" +
"<div class=\"img-next\"></div>" +
"<ul class=\"contextmenu\" id='contextmenu'>" +
"<li>" +
"<a class=\"downimg\">下载图片</a>" +
"</li>" +
"<li>" +
"<a class=\"clockwise\">顺时针旋转90°</a>" +
"</li>" +
"<li>" +
"<a class=\"counterClockwise\">逆时针旋转90°</a>" +
"</li>" +
"</ul>" +
"</div>" +
"</div>";
$("#addMaskLater").html(maskBg);
if(len > 1) {
showSmall(); //加载缩略图
} else {
$(".img-pre").css('display', 'none');
$(".img-next").css('display', 'none');
}
showImg(); //图片加载
showCtrl(); //插件操作
}
/*加载图片 及图片操作*/
function showImg() {
$(".mask-layer-imgbox").empty();
var imgCont = '<div class="mask-layer-imgName">' + arrName[num] + '</div>' +
'<div class="layer-img-box"><img src="' + arrPic[num] + '" alt=""></div>';
$(".mask-layer-imgbox").append(imgCont);
imgInit(); //图片操作
}
/*插件操作*/
function showCtrl() {
//上一张
$(".img-pre").on("click", function() {
num--;
if(num == -1) {
num = len - 1;
}
showImg();
showSmallThis(); //显示当前选中
});
//下一张
$(".img-next").on("click", function() {
num++;
if(num == len) {
num = 0;
boxReset();
}
showImg();
showSmallThis(); //显示当前选中
});
/*关闭*/
$(".mask-layer-close").click(function() {
$(".mask-layer").remove();
$("#addMaskLater").remove();//姜佳泉添加-目的：二次调用时不会重复渲染
});
/*缩略图操作方法*/
if(arrPic.length > 1) {
showSmallThis(); //显示当前选中
}
/*缩略图当前*/
function showSmallThis() { //显示当前选中的小图
$('.mask-small-img').removeClass('onthis');
$($('.mask-small-img')[num]).addClass('onthis');
allowShow();
}
/*小图点击切换*/
$('.mask-small-img').on("click", function() {
num = $('.mask-small-img').index(this);
showImg();
showSmallThis(); //显示当前选中
});
/*box-go-left 内容向右移动*/
$('.box-go-left').on('click', function() {
boxGoRight();
});
$('.box-go-right').on('click', function() {
boxGoLeft();
});
function boxGoLeft(intTime) { //向左移动
intTime ? intTime : intTime = 1;
if(leftPoint > 0) {
$('.small-img-box').animate({
left: '-=' + 630 * intTime
}, 500);
leftPoint = leftPoint - intTime;
rightPoint = rightPoint + intTime;
}
}
function boxGoRight() { //向右移动
if(rightPoint > 0) {
$('.small-img-box').animate({
left: '+=630'
}, 500);
leftPoint++;
rightPoint--;
}
}
function allowShow() { //保持选中的图片在容器中能看到
/*跟随切换*/
var boxLeft = $('.small-content').offset().left; //盒子距离顶部
var thisLeft = $('.mask-small-img.onthis').offset().left; //当前选中图片距离顶部
var intTime = Math.floor((thisLeft - boxLeft) / 630);
if(thisLeft - boxLeft >= 630) {
boxGoLeft(intTime);
} else if(thisLeft < boxLeft) {
boxGoRight();
} else {
//console.log('不需移动')
}
}
/*复位*/
function boxReset() {
$('.small-img-box').animate({
left: '0'
}, 500);
leftPoint = Math.ceil(arrPic.length / 5) - 1;
rightPoint = 0;
}
$(".clockwise").click(function() {
clockwise(); //顺时针旋转
});
$(".counterClockwise").click(function() {
counterClockwise(); //逆时针旋转
})
/*顺时针旋转*/
function clockwise() {
spin_n += 90;
$(".mask-layer-imgbox img").css({
"transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
});
};
/*逆时针旋转*/
function counterClockwise() {
spin_n -= 90;
$(".mask-layer-imgbox img").css({
"transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
});
}
rightMenu('.mask-layer-container');
function rightMenu(dom) {
// 鼠标右键事件
$(dom).contextmenu(function(e) {
// 获取窗口尺寸
var winWidth = $(document).width();
var winHeight = $(document).height();
// 鼠标点击位置坐标
var mouseX = e.clientX;
var mouseY = e.clientY;
// ul标签的宽高
var menuWidth = $(".mask-layer .contextmenu").width();
var menuHeight = $(".mask-layer.contextmenu").height();
// 最小边缘margin(具体窗口边缘最小的距离)
var minEdgeMargin = 10;
// 以下判断用于检测ul标签出现的地方是否超出窗口范围
// 第一种情况：右下角超出窗口
if(mouseX + menuWidth + minEdgeMargin >= winWidth &&
mouseY + menuHeight + minEdgeMargin >= winHeight) {
menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
menuTop = mouseY - menuHeight - minEdgeMargin + "px";
}
// 第二种情况：右边超出窗口
else if(mouseX + menuWidth + minEdgeMargin >= winWidth) {
menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
menuTop = mouseY + minEdgeMargin + "px";
}
// 第三种情况：下边超出窗口
else if(mouseY + menuHeight + minEdgeMargin >= winHeight) {
menuLeft = mouseX + minEdgeMargin + "px";
menuTop = mouseY - menuHeight - minEdgeMargin + "px";
}
// 其他情况：未超出窗口
else {
menuLeft = mouseX + minEdgeMargin + "px";
menuTop = mouseY + minEdgeMargin + "px";
};
// ul菜单出现
$(".mask-layer .contextmenu").css({
"left": menuLeft,
"top": menuTop
}).show();
// 阻止浏览器默认的右键菜单事件
return false;
});
// 点击之后，右键菜单隐藏
$(document).click(function() {
$(".contextmenu").hide();
});
}
}
/*图片操作方法*/
function imgInit() {
zoom_n = 1;//重置缩放比例
/*图片拖拽*/
var $div_img = $(".layer-img-box img");
//绑定鼠标左键按住事件
$div_img.bind("mousedown", function(event) {
event.preventDefault && event.preventDefault(); //去掉图片拖动响应
//获取需要拖动节点的坐标
var offset_x = $(this)[0].offsetLeft; //x坐标
var offset_y = $(this)[0].offsetTop; //y坐标
//获取当前鼠标的坐标
var mouse_x = event.pageX;
var mouse_y = event.pageY;
//绑定拖动事件
//由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
$(".layer-img-box").bind("mousemove", function(ev) {
// 计算鼠标移动了的位置
var _x = ev.pageX - mouse_x;
var _y = ev.pageY - mouse_y;
//设置移动后的元素坐标
var now_x = (offset_x + _x) + "px";
var now_y = (offset_y + _y) + "px";
//改变目标元素的位置
$div_img.css({
top: now_y,
left: now_x
});
});
//当鼠标左键松开，接触事件绑定
$(".layer-img-box").bind("mouseup", function() {
$(".layer-img-box").unbind("mousemove");
});
});
//绑定鼠标滚轮缩放图片
$div_img.bind("mousewheel DOMMouseScroll", function(e) {
e = e || window.event;
var delta = e.originalEvent.wheelDelta || e.originalEvent.detail;
var dir = delta > 0 ? 'down' : 'up';
zoomImg(this, dir);
return false;
});
//鼠标滚轮缩放图片
function zoomImg(o, delta) {
if(delta == 'up') {
zoom_n -= 0.2;
zoom_n = zoom_n <= 0.2 ? 0.2 : zoom_n;
} else {
zoom_n += 0.2;
}
$(".mask-layer-imgbox img").css({
"transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
"-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
});
}
}
/*缩略图显示*/
function showSmall() {
leftPoint = Math.ceil(arrPic.length / 6) - 1;
rightPoint = 0;
$(".mask-layer-imgbox").addClass('has-small');
var sDom = "<div class='small-content'><div class='small-img-box'></div></div>"
$(".mask-layer-container").append(sDom);
/*添加缩略图显示*/
for(var i = 0; i < arrPic.length; i++) {
$('.small-img-box').append('<img class="mask-small-img" src=' + arrPic[i] + '>');
}
if(arrPic.length > 6) { //大于六张出现左右移动按钮
$(".small-img-box").width(Math.ceil(arrPic.length / 6) * 630);
$('.small-content').append('<span class="box-go-left"></span><span class="box-go-right"></span>');
}
}
}
preview.css
/**
* Created by WangCheng on 2020/9/24.
*/
/*背景框*/
.mask-layer * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.mask-layer {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 202020;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mask-layer .mask-layer-close {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
background: url(img/closeicon.png) no-repeat center center;
background-size: cover;
cursor: pointer;
}
.mask-layer-black {
width: 100%;
height: 100%;
background: #000;
opacity: .75;
position: absolute;
top: 0;
left: 0;
}
.mask-layer-container {
width: 100%;
height: 100%;
position: relative;
}
.mask-layer-container .small-content {
width: 630px;
height: 100px;
position: absolute;
left: 50%;
transform: translate(-50%);
transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
bottom: 0;
overflow: hidden;
}
.small-content .small-img-box {
position: relative;
top: 0;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
}
.small-img-box .mask-small-img {
width: 100px;
height: 100px;
border: 2px solid transparent;
margin: 0 5px 0 0;
opacity: 0.4;
cursor: pointer;
}
.small-img-box .mask-small-img.onthis {
border: 2px solid #1e9fff;
opacity: 1;
}
.small-content .box-go-left {
position: absolute;
width: 20px;
display: block;
text-align: center;
left: 0px;
bottom: 0;
height: 100px;
background: url(./img/left_img.png) no-repeat center;
background-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.small-content .box-go-right {
position: absolute;
width: 20px;
display: block;
text-align: center;
right: 0px;
bottom: 0;
height: 100px;
background: url(./img/right_img.png) no-repeat center;
background-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.small-content .box-go-left:hover,
.small-content .box-go-right:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
background-size: 24px;
}
.mask-layer-container .img-pre {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
left: 20px;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
background: url(img/prev.png) no-repeat center center;
cursor: pointer;
}
.mask-layer-container .img-pre:hover {
background: url(img/prev_h.png) no-repeat center center;
background-color: rgba(0, 0, 0, 0.3);
}
.mask-layer-container .img-next {
width: 100px;
height: 100px;
position: absolute;
border-radius: 100%;
cursor: pointer;
background: url(img/next.png) no-repeat center center;
right: 20px;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
}
.mask-layer-container .img-next:hover {
background: url(img/next_h.png) no-repeat center center;
background-color: rgba(0, 0, 0, 0.3);
}
.mask-layer-container .mask-layer-imgbox {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.mask-layer-container .mask-layer-imgbox.has-small {
height: calc(100% - 105px);
}
.mask-layer-imgbox .mask-layer-imgName {
z-index: 999;
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
height: 30px;
width: 630px;
padding: 5px;
color: #ffffff;
background: rgba(0, 0, 0, 0.3);
transition: all linear 0.3s;
}
.mask-layer-imgbox:hover .mask-layer-imgName {
bottom: 0px;
}
.mask-layer-imgbox .layer-img-box {
position: relative;
width: 100%;
height: 100%;
}
.layer-img-box>p{
position: absolute;
transform-origin: center;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
width: 100%;
height: 100%;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
cursor: move;
left: 0;
top: 0;
}
.mask-layer-imgbox .layer-img-box img {
position: absolute;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
-o-transform: translate(-50%, -50%) scale(1);
}
.mask-layer-imgbox .layer-img-box img:hover {
cursor: move;
}
.zoomImg-hide-box {
display: none !important;
}
/*右键菜单*/
.mask-layer .contextmenu {
list-style: none;
display: none;
position: absolute;
width: 180px;
background: #FFFFFF;
border-radius: 5px;
z-index: 99;
border: 1px solid #333;
}
.mask-layer .contextmenu li {
transition: ease 0.3s;
}
.mask-layer .contextmenu li:hover {
background: #333333;
}
.mask-layer .contextmenu li>a {
display: block;
padding: 10px 10px 10px 35px;
color: #000000;
text-decoration: none;
transition: ease 0.3s;
}
.mask-layer .contextmenu li>a.clockwise{
background: url(img/right_rotate.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.contextmenu li>a.clockwise:hover{
background: url(img/right_rotate_h.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.mask-layer .contextmenu li>a.counterClockwise{
background: url(img/left_rotate.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.contextmenu li>a.counterClockwise:hover{
background: url(img/left_rotate_h.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.mask-layer .contextmenu li>a.downimg{
background: url(img/down.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.contextmenu li>a.downimg:hover{
background: url(img/down_h.png) no-repeat left 5px center;
background-size:24px 24px ;
}
.mask-layer .contextmenu li:hover>a {
color: #FFFFFF;
}
.mask-layer .contextmenu .menu-parend:hover .menu-child {
display: block;
}
使用
<div class="zoomImgBox">
<img src="\CertificatePi149.png" class="zoomImg">
<img src="\Certific35168.png" class="zoomImg">
<img src="\Certi472136469.png" class="zoomImg">
</div>
效果
