介绍

zoom.js 是一款比较简洁而有效地 jQuery 插件。
github原作者：@fat

效果：(点击图片)

2.png

代码实现

前提引入jquery地址！

在 head.php 的</head>之前引入css样式表

<link rel="stylesheet" type="text/css" href="https://www.ihewro.com/zoom/css/zoom.css">
在footer.php 添加 下面 3段js
<script src="//cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.ihewro.com/zoom/dist/zoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
        var setupContents = function () {
            $(".post-content img:not(article .link-box img, img[no-zoom])").each(function() {
                $(this).attr('data-action', 'zoom');
                if($(this).next().is('br')){
                    $(this).next().remove();
                }
            });
          
        };
 setupContents();
</script>
  • 前面两个js地址由@fat 提供
  • 最后一段js，是选择 post-content 区域的图片，并且加入 data-action="zoom"属性值。是从 @Hran的主题中扒出来的。我实在写不出来==灰常感谢！

最后

这个小改动应该是近期最后一个改动啦！花费好多精力

  • 增加右下角返回顶部等功能小菜单(已经完成)
  • 重写滚动条代码(已经完成)
  • 在文章标题下方增加“百度是否收录”判断(已经完成)
  • 在文章标题下的信息前面加上小图标(已经完成)
  • 更改加载页面的样式。包括顶部加载条。（已经完成）
  • 增加 灯箱效果。(已经完成)

要开始学习数据结构了[衰！！！]

最后修改：2019 年 03 月 23 日
© 允许规范转载
喜欢我的文章吗？
别忘了点赞或赞赏，让我知道创作的路上有你陪伴。