hexo文章中图片点击全屏查看

hexo中实现类似于微信公众号中，点击图片方法全屏查看，再点击后回到原来的状态。

效果如下,点击下图的图片放大查看。

1
2
3

|1|2|3|
|--|--|--|
|![](http://qnfile.devzhao.com/blog/2018-10-16-155439.png)|![](http://qnfile.devzhao.com/blog/2018-10-16-155529.png)|![](http://qnfile.devzhao.com/blog/2018-10-16-155650.jpg)|

实现的效果如下：

1	2	3

1.修改 post-details.js 文件

文件目录：

1
2
3

devzhao.com/themes/next/source/js/src/post-details.js

devzhao.com是我的站点根目录。

在文件最后添加：

//----自定义js----------------
function createImgEventFullScreen() {
  var imgs = $(".post-body").find("img");
  console.log(imgs);
  for(var i = 0;i < imgs.length;i++) {
    // $(imgs[i]).click(createCover(imgs[i]));
    imgs[i].onclick= function(e) {
      var src = e.srcElement.currentSrc;
      createCover(src)
    }
  }

  function createCover (src) {
    console.log(src);
    var cover = $("<div id='fullScreenCover' class='zhao-cover-img-container'><img class='zhao-cover-img' src='"+src+"'/></div>");
    $("#fullScreenCover").remove();
    $("body").append(cover);
    $("body").addClass("zhao-no-scroll");
    $("#fullScreenCover").click(function(){
      $("#fullScreenCover").remove();
      $("body").removeClass("zhao-no-scroll");
    })
  }
}
setTimeout(function(){
  createImgEventFullScreen();
},1000)

2.修改custom.styl文件

文件目录：

1	devzhao.com/themes/next/source/css/_custom/custom.styl

在最后添加

.zhao-cover-img-container{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 z-index: 10002;
 text-align: center;
 background-color: #000;
 overflow-y: scroll;
}

.zhao-cover-img{
 width: 100%;
 position: absolute;
 top: 0;
 bottom: 0;
}
.zhao-no-scroll{
 width: 100%;
 height: 100vh;
 overflow: hidden;
}

3.修改blog-encrypt.js文件

如果你安装了hexo-blog-encrypt插件，需要做这一步。

文件目录：

1	devzhao.com/node_modules/hexo-blog-encrypt/lib/blog-encrypt.js

找到如下代码

1	$('#encrypt-blog').html(content);

在后面加上这行代码：

1	createImgEventFullScreen();

如下图:

上面代码还有些问题：

还有点小问题，比如第三个图片，电脑上打开，头顶上和底部有一些显示不全。

在微信中打开第二个图，向上滑的时候，底下的层会跟着滑动（好像在微信里面，禁用滑动，没生效），手机Safari中也没有生效

参考文献

hexo文章中图片点击全屏查看