【layui】layer弹出图片层（开启图片旋转放大缩小还原）

最新推荐文章于 2025-05-14 09:52:58 发布

Minions_Fatman

最新推荐文章于 2025-05-14 09:52:58 发布

阅读量3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/Minions_Fatman/article/details/141215861

在这里插入图片描述

详细参照layui官网组件
弹出层组件 🔥Photots
——————————————————————————
弹出图片层（开启图片旋转放大缩小还原）==是layui2.8.16+的新增功能，
新增 photos 层的鼠标滚轮缩放功能 ==是layui2.8.16的新增功能，
为了不影响我的layui-v2.4.5旧版本使用，我把这一部分单独拿出来写了layphoto.js。

1、引入layphoto.js

（路径 /static/admin/src/controller/layphoto.js ）

layui.use(['admin','form','view','setter','layer','layphoto'], function(){
   
   
   var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,layphoto= layui.layphoto
        ,router = layui.router();
});

2、点击事件弹出图片层

<button type="button" class="layui-btn" onclick="see_jseq(this)">Photots</button>

// 图片放大缩小、排序及查看
window.see_jseq = function(_this) {
   
   
    layer.photos({
   
   
        photos: {
   
   
            start: 1, // 初始显示的图片序号，默认 0
            data: [
                {
   
   src: "https://unpkg.com/outeres@0.1.1/demo/layer.png"},
                {
   
   src: "https://unpkg.com/outeres@0.1.1/demo/000.jpg"},
                {
   
   src: "https://unpkg.com/outeres@0.1.1/demo/outer-space.jpg"}
            ]
        }
    });
};

3、css的引入和 layphoto.js

在 layui.css 加一个“缩小”图标，需引入 font 文件夹(放在资源下载啦)
layer弹出图片层（开启图片旋转放大缩小还原）
.layui-icon-reduce-circle:before { content: “\e616” }
——————————————————————————
将【.layui-layer-photos】引入到【layer.css】中

/* .layui-layer-photos */
.layui-layer-photos {
   
   
    background: 0 0;
    box-shadow: none
}
.layui-layer-photos .layui-layer-content {
   
   
    overflow: visible;
    text-align: center
}
.layui-layer-photos .layer-layer-photos-main img {
   
   
    position: relative;
    width: 100%;
    display: inline-block;
    *display: inline;
    *zoom:1;vertical-align: top
}
.layui-layer-photos-next,.layui-layer-photos-prev {
   
   
    position: fixed;
    top: 50%;
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin-top: -26px;
    cursor: pointer;
    font-size: 52px;
    color: #717171
}
.layui-layer-photos-prev {
   
   
    left: 32px
}
.layui-layer-photos-next {
   
   
    right: 32px
}
.layui-layer-photos-next:hover,.layui-layer-photos-prev:hover {
   
   
    color: #959595
}
.layui-layer-photos-toolbar {
   
   
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 52px;
    line-height: 52px;
    background-color: rgba(0,0,0,.32);
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0
}
.layui-layer-photos-toolbar>* {
   
   
    display: inline-block;
    vertical-align: top;
    padding: 0 16px;
    font-size: 12px;
    color: #fff;
    *display: inline;
    *zoom:1
}
.layui-layer-photos-toolbar * {
   
   
    font-size: 12px
}
.layui-layer-photos-header {
   
   
    top: 0;
    bottom: auto
}
.layui-layer-photos-header>span {
   
   
    cursor: pointer
}
.layui-layer-photos-header>span:hover {
   
   
    background-color: rgba(51,51,51,.32)
}
.layui-layer-photos-header .layui-icon {
   
   
    font-size: 18px
}
.layui-layer-photos-footer>h3 {
   
   
    max-width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.layui-layer-photos-footer a:hover {
   
   
    text-decoration: underline
}
.layui-layer-photos-footer em {
   
   
    font-style: normal
}
@-webkit-keyframes layer-bounceOut {
   
   
    100% {
   
   
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    30% {
   
   
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    0% {
   
   
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes layer-bounceOut {
   
   
    100% {
   
   
        opacity: 0;
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }

    30% {
   
   
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05)
    }

    0% {
   
   
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
.layer-anim-close {
   
   
    -webkit-animation-name: layer-bounceOut;
    animation-name: layer-bounceOut;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .2s;
    animation-duration: .2s
}

layphoto.js

这个地方老是报错我就隐藏啦，没啥影响是个layer.css的引入
ready: function(e) {
   
   
  // var t = "layer"
   //     , i = (n ? "modules/" : "css/") + "layer.css?v=" + h.v;
   // return n ? layui["layui.all"] ? "function" == typeof e && e() : layui.addcss(i, e, t) : u.link(i, e, t),
   // this
},

layui.define("jquery",function(exports){
   
   

!function(p) {
   
   
    "use strict";
    var m, d, e, n = p.layui && layui.define, u = {
   
   
        getPath: (e = document.currentScript ? document.currentScript.src : function() {
   
   
            for (var e, t = document.scripts, i = t.length - 1, n = i; 0 < n; n--)
                if ("interactive" === t[n].readyState) {
   
   
                    e = t[n].src;
                    break
                }
            return e || t[i].src
        }(),
        (p.LAYUI_GLOBAL || {
   
   }).layer_dir || e.substring(0, e.lastIndexOf("/") + 1)),
        config: {
   
   
            removeFocus: !0
        },
        end: {
   
   },
        events: {
   
   
            resize: {
   
   }
        },
        minStackIndex: 0,
        minStackArr: [],
        btn: ["&#x786E;&#x5B9A;", "&#x53D6;&#x6D88;"],
        type: ["dialog", "page", "iframe", "loading", "tips"],
        getStyle: function(e, t) {
   
   
            e = e.currentStyle || p.getComputedStyle(e, null);
            return e[e.getPropertyValue ? "getPropertyValue" : "getAttribute"](t)
        },
        link: function(e, i, t) {
   
   
            var n, a, o, s, l, r;
            h.path && (n = document.getElementsByTagName("head")[0],
            a = document.createElement("link"),
            o = ((t = "string" == typeof i ? i : t) || e).replace(/\.|\//g, ""),
            s = "layuicss-" + o,
            l = "creating",
            r = 0,
            a.rel = "stylesheet",
            a.href = h.path + e,
            a.id = s,
            document.getElementById(s) || n.appendChild(a),
            "function" == typeof i) && !function c(e) {
   
   
                var t = document.getElementById(s);
                return 100 < ++r ? p.console && console.error(o + ".css: Invalid") : void (1989 === parseInt(u.getStyle(t, "width")) ? (e === l && t.removeAttribute("lay-status"),
                t.getAttribute("lay-status") === l ? setTimeout(c, 100) : i()) : (t.setAttribute("lay-status", l),
                setTimeout(function() {
   
   
                    c(l)
                }, 100)))
            }()
        }
    }, h = {
   
   
        v: "3.7.0",
        ie: (e = navigator.userAgent.toLowerCase(),
        !!(p.ActiveXObject || "ActiveXObject"in p) && ((e.match(/msie\s(\d+)/) || [])[1] || "11")),
        index: p.layer && p.layer.v ? 1e5 : 0,
        path: u.getPath,
        config: function(e, t) {
   
   
            return h.cache = u.config = m.extend({
   
   }, u.config, e = e || {
   
   }),
            h.path = u.config.path || h.path,
            "string" == typeof e.extend && (e.extend = [e.extend]),
            u.config.path && h.ready(),
            e.extend && (n ? layui.addcss("modules/layer/" + e.extend) : u.link("css/" + e.extend)),
            this
        },
        ready: function(e) {
   
   
            // var t = "layer"
            //     , i = (n ? "modules/" : "css/") + "layer.css?v=" + h.v;
            // return n ? layui["layui.all"] ? "function" == typeof e && e() : layui.addcss(i, e, t) : u.link(i, e, t),
            // this
        },
        alert: function(e, t, i) {
   
   
            var n = "function" == typeof t;
            return h.open(m.extend({
   
   
                content: e,
                yes: i = n ? t : i
            }, n ? {
   
   } : t))
        },
        confirm: function(e, t, i, n) {
   
   
            var a = "function" == typeof t;
            return a && (n = i,
            i = t),
            h.open(m.extend({
   
   
                content: e,
                btn: u.btn,
                yes: i,
                btn2: n
            }, a ? {
   
   } : t))
        },
        msg: function(e, t, i) {
   
   
            var n = "function" == typeof t
                , a = u.config.skin
                , a = (a ? a + " " + a + "-msg" : "") || "layui-layer-msg"
                , o = y.anim.length - 1;
            return n && (i = t),
            h.open(m.extend({
   
   
                content: e,
                time: 3e3,
                shade: !1,
                skin: a,
                title: !1,
                closeBtn: !1,
                btn: !1,
                resize: !1,
                end: i,
                removeFocus: !1
            }, n && !u.config.skin ? {
   
   
                skin: a + " layui-layer-hui",
                anim: o
            } : (-1 !== (t = t || {
   
   }).icon && (void 0 !== t.icon || u.config.skin) || (t.skin = a + " " + (t.skin || "layui-layer-hui")),
            t)))
        },
        load: function(e, t) {
   
   
            return h.open(m.extend({
   
   
                type: 3,
                icon: e || 0,
                resize: !1,
                shade: .01,
                removeFocus: !1
            }, t))
        },
        tips: function(e, t, i) {
   
   
            return h.open(m.extend({
   
   
                type: 4,
                content: [e, t],
                closeBtn: !1,
                time: 3e3,
                shade: !1,
                resize: !1,
                fixed: !1,
                maxWidth: 260,
                removeFocus: !1
            }, i))
        }
    }, t = function(e) {
   
   
        var t = this
            , i = function() {
   
   
            t.creat()
        };
        t.index = ++h.index,
        t.config.maxWidth = m(d).width() - 30,
        t.config = m.extend({
   
   }, t.config, u.config, e),
        document.body ? i() : setTimeout(function() {
   
   
            i()
        }, 30)
    }, y = (t.pt = t.prototype,
    ["layui-layer", ".layui-layer-title", ".layui-layer-main", ".layui-layer-dialog", "layui-layer-iframe", "layui-layer-content", "layui-layer-btn", "layui-layer-close"]), i = (y.anim = {
   
   
        0: "layer-anim-00",
        1: "layer-anim-01",
        2: "layer-anim-02",
        3: "layer-anim-03",
        4: "layer-anim-04",
        5: "layer-anim-05",
        6: "layer-anim-06",
        slideDown: "layer-anim-slide-down",
        slideLeft: "layer-anim-slide-left",
        slideUp: "layer-anim-slide-up",
        slideRight: "layer-anim-slide-right"
    },
    y.SHADE = "layui-layer-shade",
    y.MOVE = "layui-layer-move",
    t.pt.config = {
   
   
        type: 0,
        shade: .3,
        fixed: !0,
        move: y[1],
        title: "&#x4FE1;&#x606F;",
        offset: "auto",
        area: "auto",
        closeBtn: 1,
        icon: -1,
        time: 0,
        zIndex: 19891014,
        maxWidth: 360,
        anim: 0,
        isOutAnim: !0,
        minStack: !0,
        moveType: 1,
        resize: !0,
        scrollbar: !0,
        tips: 2
    },
    t.pt.vessel = function(e, t) {
   
   
        var i, n = this.index, a = this.config, o = a.zIndex + n, s = "object" == typeof a.title, l = a.maxmin && (1 === a.type || 2 === a.type), s = a.title ? '<div class="layui-layer-title" style="' + (s ? a.title[1] : "") + '">' + (s ? a.title[0] : a.title) + "</div>" : "";
        return a.zIndex = o,
        t([a.shade ? '<div class="' + y.SHADE + '" id="' + y.SHADE + n + '" times="' + n + '" style="z-index:' + (o - 1) + '; "></div>' : "", '<div class="' + y[0] + " layui-layer-" + u.type[a.type] + (0 != a.type && 2 != a.type || a.shade ? "" : " layui-layer-border") + " " + (a.skin || "") + '" id="' + y[0] + n + '" type="' + u.type[a.type] + '" times="' + n +