<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片预览完善</title><style>.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;}</style><style>.content {width: 640px;padding: 20px;margin: 20px auto;border: 1px solid #DDDDDD;}.content img {width: 100px;height: 100px;}</style>
</head><body><div class="content"><img class="zoomImg" src="http://pic1.win4000.com/wallpaper/1/579ab444114a7.jpg" /><img class="zoomImg" src="http://pic1.win4000.com/wallpaper/2018-09-11/5b97693465fbe.jpg" /><img class="zoomImg" src="http://pic1.win4000.com/wallpaper/5/579995baa6a81.jpg" /><img class="zoomImg" src="http://pic1.win4000.com/wallpaper/2019-11-22/5dd746e0da2d9.jpg" /><img class="zoomImg" src="http://pic1.win4000.com/wallpaper/5/538e765510926.jpg" /><img class="zoomImg" src="http://pic1.win4000.com/mobile/5/55b89434a1f47.jpg" /><img class="zoomImg" src="http://pic1.win4000.com/mobile/5/55b894339b12b.jpg" /><img class="zoomImg" src="http://pic1.win4000.com/wallpaper/1/53900c9da6373.jpg" /><img class="zoomImg" src="https://up.36992.com/22/39/1b/c2/86b968577aad8496c2789f4e5219d467.jpg" /></div><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="preview.js" type="text/javascript" charset="utf-8"></script><script>function showZoomImg(imgBox, domName) {var len = 0; var domImg; var arrPic = new Array(); var arrName = new Array(); var num = 0; var numNow = 1; var leftPoint; var rightPoint; var spin_n = 0; var zoom_n = 1;showModel(); function showModel() {$("body").on('click', domName, function () {domImg = $(imgBox).find(domName);len = domImg.length;arrPic = [];arrName = [];for (var i = 0; i < len; i++) {arrPic[i] = domImg.eq(i).attr("src"); 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(); });}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=\"clockwise\">顺时针旋转90°</a>" +"</li>" +"<li>" +"<a class=\"counterClockwise\">逆时针旋转90°</a>" +"</li>" +"</ul>" +"</div>" +"</div>";$("body").append(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();});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').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 {}}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;var menuWidth = $(".mask-layer .contextmenu").width();var menuHeight = $(".mask-layer.contextmenu").height();var minEdgeMargin = 10;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";};$(".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; var offset_y = $(this)[0].offsetTop; var mouse_x = event.pageX;var mouse_y = event.pageY;$(".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>');}}}</script><script type="text/javascript">showZoomImg(".content", '.zoomImg');</script>
</body></html>
![[C++入门]---List的使用及模拟实现](https://img-blog.csdnimg.cn/3a123a3c95384109a46c26ae50c9e442.png)
