用 zoom.js 给博客园中博文的图片添加单击时弹出放大效果
前往 zoom.js 的 github 下载需要的 js与css文件
将下载下来的 zoom.js 与zoom.css 上传至自己的博客园文件
页面定制CSS代码 添加自定义代码:
#main, #topics, #mainContent, .postBody { overflow: visible; } #mainContent .forFlow { overflow: visible; } .zoom-overlay { background: transparent; }
页脚Html代码 添加自定义代码(注意更换zoom.js与zoom.css的地址):
<!--图片放大--> <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script> <script src="https://blog-static.cnblogs.com/files/gaoht/zoom.js"></script>
然后给要放大的图片标签添加 data-action="zoom" 属性: <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>