00:00/
发布于2018-02-01 / 2679次浏览
工作中用到了,记录一下。直接上代码:
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),向原作者致敬。
好!(假装看懂了)
强迫症受不了,想改~
1. var 全换成 const
2. 双引号改为单引号
3. ‘+’号拼接用模版字符串
4. function 眼不见为净
5. 分号去掉,无分号党
6. 还有神一般的缩进,必须两空格
养成代码洁癖,从现在做起
@蝉時雨 好的大佬,以后会注意。说到排版那都是wordpress的锅。
@蝉時雨 这明明是es6的洁癖,已经写习惯了老年代码的我表示不习惯!
@广树 时代总是在进步的(╯▔皿▔)╯
@蝉時雨
以后社会上会遇到很多兼容IE的项目的。
@广树 基本上 babel 就可以应付了吧,我这小公司从不考虑这些
@蝉時雨 真是幸福呀!
@广树 目标群体不同吧,根本不考虑还在用远古设备的群体,费精力效益也低~
@广树 我们公司都要求兼容到低版本的IE,所以这些ES6语法都不能写!
@admin 哈哈哈,一样,一样。
@蝉時雨 重度强迫症啊。
大佬代码写的好不讲究
jq 大佬~,我当点的一点 jq 技能都忘光了,到现在毫无用武之地