使用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>

即可

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM