个人头像

柠檬酸

1月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

几行代码实现一个简易版灯箱

发布于2018-02-01 / 1572次浏览

工作中用到了,记录一下。直接上代码:

var css = "<style class='view-image-css'>.view-img{position:fixed;box-sizing:border-box;background:rgba(255,255,255,.9);width:100%;height:100%;top:0;left:0;text-align:center;padding:2%;z-index:999;cursor: zoom-out}.view-img img,.view-img span{max-width:100%;max-height:100%;position:relative;top:50%;transform: translateY(-50%);display:inline-block;}.view-img img{animation:view-img-show .8s -0.1s ease-in-out}.view-img span{height:2em;color:#AAB2BD;overflow:hidden;position:absolute;top:50%;left:0;right:0;width:120px;text-align:center;margin:-1em auto;}.view-img span:after{content:'';position:absolute;bottom:0;left:0;transform: translateX(-100%);width:100%;height:2px;background:#3274ff;animation:view-img-load .8s -0.1s ease-in-out infinite;}@keyframes view-img-load{0%{transform: translateX(-100%);}100%{transform: translateX(100%);}}@keyframes view-img-show{0%{opacity:0;}100%{opacity:1;}}</style>"
 var imgUrl = $(this).find("img").attr("src");
 $("body").append(css + "<div class='view-img'><span>loading...</span></div>");
 setTimeout(function () {
 $(".view-img").html("<img src=" + imgUrl + ">");
 $(".view-img").click(function () {
 $('.view-image-css').remove();
 $(".view-img").remove();
 });
 },300);

样式参考tokinx的ViewImage.js,也就是本博客一直再用的灯箱,很小巧(1kb),向原作者致敬。

喜欢 2
TAGS:  
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : 几行代码实现一个简易版灯箱

14 条评论

  1. 野兔 说道: 来自 Google Chrome 64.0.3282.140 in Windows 10
    2018-02-07 1:03

    好!(假装看懂了)

  2. 蝉時雨 说道: 来自 Google Chrome 63.0.3239.132 in Windows 7
    2018-02-02 17:49

    强迫症受不了,想改~
    1. var 全换成 const
    2. 双引号改为单引号
    3. ‘+’号拼接用模版字符串
    4. function 眼不见为净
    5. 分号去掉,无分号党
    6. 还有神一般的缩进,必须两空格

    养成代码洁癖,从现在做起 :cool:

    • admin 博主 说道: 来自 Google Chrome 63.0.3239.132 in Windows 8.1
      2018-02-03 17:54

      @蝉時雨 好的大佬,以后会注意。说到排版那都是wordpress的锅。

    • 广树 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
      2018-02-04 18:45

      @蝉時雨 这明明是es6的洁癖,已经写习惯了老年代码的我表示不习惯!

      • 蝉時雨 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
        2018-02-04 18:48

        @广树 时代总是在进步的(╯▔皿▔)╯

        • 广树 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
          2018-02-04 19:07

          @蝉時雨 :evil: 以后社会上会遇到很多兼容IE的项目的。

          • 蝉時雨 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
            2018-02-04 19:09

            @广树 基本上 babel 就可以应付了吧,我这小公司从不考虑这些 :wink:

            • 广树 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
              2018-02-04 19:10

              @蝉時雨 真是幸福呀!

              • 蝉時雨 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
                2018-02-04 19:11

                @广树 目标群体不同吧,根本不考虑还在用远古设备的群体,费精力效益也低~

      • admin 博主 说道: 来自 Google Chrome 63.0.3239.132 in Windows 8.1
        2018-02-04 19:10

        @广树 我们公司都要求兼容到低版本的IE,所以这些ES6语法都不能写!

        • 广树 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
          2018-02-04 19:19

          @admin 哈哈哈,一样,一样。

    • 后宫学长 说道: 来自 Google Chrome 65.0.3325.146 in Windows 10
      2018-03-23 3:27

      @蝉時雨 重度强迫症啊。 :evil:

  3. yukun 说道: 来自 Google Chrome 45.0.2454.101 in Windows 7
    2018-02-02 14:27

    大佬代码写的好不讲究 :biggrin:

  4. 蝉時雨 说道: 来自 Google Chrome 63.0.3239.132 in Windows 7
    2018-02-02 8:57

    jq 大佬~,我当点的一点 jq 技能都忘光了,到现在毫无用武之地 :arrow: