文章中图片放大功能的实现

0. JS权限申请

1. 下载zoom.js和zoom.css

下载地址：https://github.com/fat/zoom.js

2. 上传zoom.js和zoom.css

3. 页面定制 CSS 代码

博客园-设置-页面定制CSS代码

1 /*溢出隐藏设置*/
2 #topics, #mainContent {
3     overflow: visible;
4 }
5 #postDesc {
6     float: none;
7 }

页面定制CSS代码

4. 页脚 HTML 代码

博客园-设置-页脚 HTML 代码（注意更改zoom.js和zoom.css的地址）

 1 <!-- zoom.js 的样式（地址修改为自己文件的地址） -->
 2 <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blue-lin/zoom.css">     
 3 <!-- jQuery 的 cdn -->
 4 <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
 5 <!-- Bootstrap 的 transition.js cdn（过渡动画插件）-->
 6 <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
 7 <!-- zoom.js 核心代码（地址修改为自己文件的地址） -->
 8 <script src="https://blog-static.cnblogs.com/files/blue-lin/zoom.js"></script>
 9 <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>
10 <!-- 解决折叠按钮冲突问题  -->
11 <script type='text/javascript'>$(".code_img_closed").removeAttr("data-action");</script>
12 <script type='text/javascript'>$(".code_img_opened").removeAttr("data-action");</script>

页脚HTML代码

5. 参考文章&鸣谢

[1] https://www.cnblogs.com/mingc/p/7446492.html

[2] https://www.cnblogs.com/yadongliang/p/9327659.html