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

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

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

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），向原作者致敬。

取消回复

▼

^_^

14 条评论