多图片展示弹窗插件

熟悉的新风景
已于 2023-09-15 16:21:49 修改
阅读量291
点赞数
文章标签： js
于 2023-09-15 16:21:08 首次发布
本文链接：https://blog.csdn.net/weixin_44797182/article/details/132906705
版权
在这里插入图片描述
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>图片预览完善</title>
    <style>
        /**
 * 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;
        }
    </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>
        /**
     * Created by WangCheng on 2020/9/24.
     */
        function showZoomImg(imgBox, domName) {
            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(); //判断显示方式

            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"); //将所有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
                });
            }

            //给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=\"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 内容向右移动*/
                $('.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>');
                }
            }
        }
    </script>
    <script type="text/javascript">
        // 展示".content"中的所有'.zoomImg'图片
        showZoomImg(".content", '.zoomImg');
    </script>
</body>

</html>