使用zoom.js设置博客园图片放大缩小

在写博客园时有时会插入图片，如果图片太大放在博客区域里可能不太清晰，我们可以点击图片使其放大。

首先下载zoom,js下载地址（github）：https://github.com/jackmoore/zoom

选出zoom.js和zoom.css文件 上传到博客园的文件中。

设置博客园的html和js代码（没有js权限的，要先申请js权限）

<!-- jQuery 的 cdn -->
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap 的 transition.js cdn（过渡动画插件）-->
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<!-- zoom.js 核心代码 -->
<script src="https://blog-static.cnblogs.com/files/lpp-11-15/zoom.js"></script>　　　　/*这个属于自己上传后复制的URL*/
<script type=‘text/javascript‘>$(‘#cnblogs_post_body img‘).attr(‘data-action‘, ‘zoom‘);</script>
<!-- zoom.js 的样式 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lpp-11-15/zoom.css">  /*这个属于自己上传后复制的URL*/

<script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>

即可

 

转载于:https://www.cnblogs.com/lpp-11-15/p/11308527.html