类别:Develop / 日期:2020-04-27 / 浏览:283 / 评论:3

昨晚逛逛zblog社区,发现有人上传灯箱插件,刚好最近博客准备上个灯箱插件,顺带就测试一下JS兼容性如何...

实测下来有两个问题,一个是移动端图片左右挪动的时候会产生错误提示,好在PC端不会出现问题,激发不了我的强迫症...

如何用style替换img标签 zblog style img background 灯箱 第1张

另外一个问题把带URL的缩略图也换上了灯箱,这就有点蛋疼了。这里有两种选择,一是等作者后期更新插件,二是自己想办法替换IMG标签,使这个JS识别不到URL,自然就无法完成灯箱效果的操作。

我们先说说第一种,作者后期更新的话,要么就是在程序中加入IF判断当前IMG标签闭合,包括上级标签闭合项内是否包含href属性,如果是则关闭效果,如果不是则开启效果。要么就是加入一个类似onclick事件,如果当前标签包含onclick则关闭效果,如果不是则开启效果。不管是哪一种,都是需要加入判断语句的,所以预估作者修改起来也是要不少时间的,所以我们只能考虑第二种。

如何用style替换img标签 zblog style img background 灯箱 第2张

第二种方法就是替换img标签,把图片通过内链的形式避开JS识别,这里也有两种选择,一种是写入html里面,一种是写入class里面,因为我使用的是缩略图插件,无法在CSS里面自动生成URL,因此只能直接写入html里面。首先我们来看一下原本的代码

    <li class="widget-user media">
     <a class="pull-left" href="{$hotlist.Url}">
      <img class="media-object avatar-40" src="{$src}" alt="{$hotlist.Title}"/></a>
       <div class="media-object">
        <strong><a href="{$hotlist.Url}" title="{$hotlist.Title}">{$hotlist.Title}</a></strong>
        <p class="text-muted">浏览:{$hotlist.ViewNums}{if $hotlist->CommNums} / 评论:{$hotlist.CommNums}{/if}</p>
      </div>
    </li>

很明显这里使用了img标签,所以灯箱自动就识别了,这种情况下我们将img替换做a,然后再把src属性替换为style属性,内链方式如下

background-image: url({$article.Author.Avatar});  //图片地址
display: inline-block;  //同行显示
background-repeat: no-repeat;   //不换行
background-size: cover;  //自动识别缩放

这样基本上就可以恢复img标签原本的效果了,以下是我修改后的代码

    <li class="widget-user media">
     <a class="pull-left media-object avatar-40" style="background-image: url({$src}); display: inline-block;background-repeat: no-repeat;background-size: cover;" href="{$hotlist.Url}"></a>
      <div class="media-object"><strong>
       <a href="{$hotlist.Url}" title="{$hotlist.Title}">{$hotlist.Title}</a></strong>
        <p class="text-muted">浏览:{$hotlist.ViewNums}{if $hotlist->CommNums} / 评论:{$hotlist.CommNums}{/if}</p>
      </div>
    </li>

由于上级也是用的a来做的闭合,所以我这边直接将样式合并在一起了。background标签还有其他的选项,但是并不是所有浏览器都能兼容的,具体的请参考官方说明吧。

最后感谢一下插件作者,省的我去github一个个测试了。 @包子铺博客

赞助

感谢您的打赏~

打开支付宝扫一扫,即可进行扫码打赏哦~

版权声明 : 本文使用「署名-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议 / Article Use Creative Commons Attribution-ShareAlike 4.0 International License「CC BY 4.0」

 可能感兴趣的文章

伤心叹戈

评论区

共有 3 条评论

user 包子铺博客 / 2020-04-26 16:26:28 / Windows 10 x64 / Google Chrome 69.0.3497.100 / 回复

说实话,对PHP我懂得不多,我一般改出来的东西都是自己用了。。。为了骗波IP才发出去了  哈哈

user Tange / 2020-04-26 20:07:31 / Windows 7 x64 / Google Chrome 81.0.4044.122 / 回复
@包子铺博客

分享型博客早已没流量,只能去社区混混。只有干货型博客...比如说软件、插件、破解类分享,才会有流量,所以也不算是骗IP了。

user 包子铺博客 / 2020-04-26 20:12:01 / Windows 10 x64 / Google Chrome 69.0.3497.100 / 回复
@tange

是啊,所以只能想办法弄出点小东西骗骗IP了

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。

近期评论