具体效果请查看：https://wugenqiang.gitee.io/articles/hexo-do-picture-screen.html

写在前面

方法一存在图片放大后不美观，建议直接跳到方法二
如果想尝试解决第一种方法出现的Bug，可以尝试一下，然后我们讨论一下，方便的话可以加我QQ：2422676183

方法一

修改post-details.js文件

文件目录：/themes/next/source/js/src/post-details.js
在文件最后添加：

//----自定义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)

修改custom.styl文件

文件目录：/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;
}

不过还是会存在一个小bug，大图片图片放大时有点不美观
如果您知道如何解决可以给我留言，谢谢啦

方法二

这种方法使用了图片浏览放大功能fancybox插件

切换到lib目录

cd next/source/lib

下载插件

git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

更改主题配置文件

更改next/_config.yml文件

fancybox: true

测试效果

部署hexo s之后点击图片，如图：

完美，这种效果我很满意，你觉得呢，还是大神优秀啊~~ 好好学习！

Hexo文章中图片点击实现全屏查看相关推荐

vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能方式一:js实现全屏全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
r语言mfrow全程_如何使用R完成文章中图片处理小教程
一起成长的经历 - 技术服务课程定制 - - 如何使用R完成文章中图片处理小教程 - Two Histograms with melt colors 柱状图显示数值变量的分布.这篇文章解释了如何在 ...
css解决uniapp使用image标签图片无法撑满全屏问题
css解决uniapp使用image标签图片无法撑满全屏问题文章目录 css解决uniapp使用image标签图片无法撑满全屏问题前言一.问题还原二.问题解决 1.在解决问题之前有必要先来学习 ...
Mac osx系统中virtual box 中的Ubuntu系统的全屏显示问题解决
Mac osx系统中virtual box 中的Ubuntu系统的全屏显示问题解决一安装virtualBox工具安装失败其他尝试方法一安装virtualBox工具选择Insert Gue ...
[html] 如何解决微信浏览器视频点击自动全屏的问题？
[html] 如何解决微信浏览器视频点击自动全屏的问题? 1.1 页面内播放 X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部 ...
解决uni-app开发中iphoneX下背景不能全屏铺满的问题
解决uni-app开发中iphoneX下背景不能全屏铺满的问题参考文章: (1)解决uni-app开发中iphoneX下背景不能全屏铺满的问题 (2)https://www.cnblogs.com/ ...
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局 CSDN:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/ar ...
linux qt应用程序全屏,QT中MDI应用程序中更改子窗口大小或是全屏显示子窗口的方法...
1.QT中窗口部件QWidget成员函数showFullScreen();是用于将窗口部件全屏显示. 但是他只对窗口模式的部件有用.子窗口的特征是 Qt::SubWindow,不是独立的窗口.因此对其 ...
jQuery炫酷点击变形全屏放大的模态窗口
这是一款效果非常炫酷的点击变形全屏放大的 jQuery模态窗口插件.该模态窗口插件当用户点击某个按钮时,按钮先变形缩小变为圆形,然后在由小圆到大圆全屏放大,效果非常酷. 最后在生成模态窗口的时候的动画 ...
html 中 css 中使背景照片覆盖全屏
html 中 css 中使背景照片覆盖全屏 #bg {background: url(../img/index.png);background-repeat: no-repeat;backgroun ...

Hexo文章中图片点击实现全屏查看