1.下載js和css文件後上傳到cnblogs(下載地址);javascript
2.按照文中所述將代碼放到相應位置(也就是頁面定製CSS代碼和頁腳HTML代碼兩處) 並修改引用的zoom.js和zoom.css文件路徑;css
3.完成以上2步便可實現點擊放大縮小的效果, 可是有個問題(也多是我模版問題), 點擊圖片後不能徹底顯示, 右側一部分被遮蓋了, F12調試發現#topics外面還包着兩層div, 正文最外層是#mainContent , 因此把這層的overflow屬性值也設置成visible, 這樣就行了.(美中不足是放大後的圖片會變模糊 囧 =_=||....)html
/*溢出隱藏設置*/ #topics, #mainContent { overflow: visible; }
4.評論區有一兄dei提出了個問題, 就是代碼+-號會出現問題, 問題及解決方案以下圖.java
代碼:jquery
<script type='text/javascript'>$(".code_img_closed").removeAttr("data-action");</script> <script type='text/javascript'>$(".code_img_opened").removeAttr("data-action");</script>
5.cnblgs自定義樣式小結:自定義cnblogs樣式小結git
詳細設置代碼:(博客主頁>設置>)github
css:(頁面定製CSS代碼)bootstrap
/*溢出隱藏設置*/ #topics, #mainContent { overflow: visible; } #postDesc { float: none; }
頁腳html:(頁腳Html代碼)瀏覽器
<!-- zoom.js 的樣式 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yadongliang/zoom.css">
<!-- 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/yadongliang/zoom.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>
如下是截圖post
點擊圖片驗證:
轉自:http://www.javashuo.com/article/p-sbglrkem-hd.html
寫博客時常常要插入圖片。有些圖片尺寸太大,這致使圖片最終的視覺呈現總會略小。爲了保留大圖片的原有信息量,須要用 js 來添加圖片的放大支持。
爲求方便快捷,我使用了 zoom.js 插件來實現博客圖片的放大支持。zoom.js 是一款視覺連續的圖像放大 jQuery 插件。選擇它的理由在於:
https://fat.github.io/zoom.js/
在 html 中引入 css 和 js 文件:
1
2
3
4
5
6
7
8
|
<!-- zoom.js 的樣式 -->
<
link
rel="stylesheet" type="text/css" href="./css/zoom.css">
<!-- 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="./js/zoom.js"></
script
>
|
而後給要放大的圖片標籤添加 data-action="zoom" 屬性:
1
|
<
img
src="./image/demo.jpg" data-action="zoom">
|
OK,就這樣。
博客園我的後臺裏申請到JS權限後,添加一句JS便可實現圖片彈出:
1
|
<script type=
'text/javascript'
>$(
'#cnblogs_post_body img'
).attr(
'data-action'
,
'zoom'
);</script>
|
可是可能會出現與某些原有樣式的衝突:
單擊圖片放大時,zoom.js 會給圖片外包裹一個 <div> 標籤做爲全景遮罩,同時圖片放大居中。可是博客園模板的 #topics 元素(博文的容器元素)設置了溢出隱藏,會致使放大圖片的部分沒法呈現出來。因此要重寫 #topics 的相應樣式:
1
|
#topics{
overflow
:
visible
; }
|
這樣圖片放大就能徹底顯示了。但 #postDesc 元素的內容(就是「posted @ 2017-08-26 17:57 xxxx 閱讀(xxxx) 評論(xxxx) 編輯 收藏」這一行)又從 #topics 裏面掉出來了。因此再加一句 css:
1
|
#postDesc{
float
:
none
; }
|
這樣就行了。具體效果根據本身的模板微調就行。
zoom.js 的放大效果顯然比較簡單,相對適合博文圖片。至於更加複雜的圖片處理,就要考慮別的插件 or 本身寫了。
參考連接:http://www.shejidaren.com/zoom-js.html
zoom.js GitHub:https://github.com/fat/zoom.js
補充:能夠採用lightbox 效果更好! https://lokeshdhakar.com/projects/lightbox2/
demo:http://code.ciaoca.com/jquery/lightbox/
瀏覽器支持
全部主流瀏覽器都支持 overflow 屬性。
註釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。
定義和用法
overflow 屬性規定當內容溢出元素框時發生的事情。
說明
默認值: | visible |
---|---|
繼承性: | no |
版本: | CSS2 |
JavaScript 語法: | object.style.overflow="scroll" |
可能的值
值 | 描述 |
---|---|
visible | 默認值。內容不會被修剪,會呈如今元素框以外。 |
hidden | 內容會被修剪,而且其他內容是不可見的。 |
scroll | 內容會被修剪,可是瀏覽器會顯示滾動條以便查看其他的內容。 |
auto | 若是內容被修剪,則瀏覽器會顯示滾動條以便查看其他的內容。 |
inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
TIY 實例