用 zoom.js 給博客園中博文的圖片添加單擊時彈出放大效果 自定義cnblogs樣式小結

 一. 寫在前面:

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

1.選擇zoom.js

寫博客時常常要插入圖片。有些圖片尺寸太大,這致使圖片最終的視覺呈現總會略小。爲了保留大圖片的原有信息量,須要用 js 來添加圖片的放大支持。

爲求方便快捷,我使用了 zoom.js 插件來實現博客圖片的放大支持。zoom.js 是一款視覺連續的圖像放大 jQuery 插件。選擇它的理由在於:

  1. 效果簡潔美觀
  2. 插件體積僅8kb
  3. 體驗友好,放大後單擊任意地方或滾動鼠標滾輪或按ESC鍵都可退出放大狀態

 

2.演示地址

https://fat.github.io/zoom.js/

 

3.使用方法

在 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,就這樣。

 

4.zoom.js與博客園模板的樣式衝突

博客園我的後臺裏申請到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 ; } 

這樣就行了。具體效果根據本身的模板微調就行。

 

5.總結

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/

 

四.圖片點擊功能升級:http://www.javashuo.com/article/p-ktrtbmdf-he.html

 

五. 最後回顧一下css的overflow屬性.

瀏覽器支持

全部主流瀏覽器都支持 overflow 屬性。

註釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。

定義和用法

overflow 屬性規定當內容溢出元素框時發生的事情。

說明

這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll,不管是否須要,用戶代理都會提供一種滾動機制。所以,有可能即便元素框中能夠放下全部內容也會出現滾動條。
默認值: visible
繼承性: no
版本: CSS2
JavaScript 語法: object.style.overflow="scroll"

可能的值

描述
visible 默認值。內容不會被修剪,會呈如今元素框以外。
hidden 內容會被修剪,而且其他內容是不可見的。
scroll 內容會被修剪,可是瀏覽器會顯示滾動條以便查看其他的內容。
auto 若是內容被修剪,則瀏覽器會顯示滾動條以便查看其他的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

TIY 實例

如何使用滾動條來顯示元素內溢出的內容

本例演示當元素內容太大而超出規定區域時,如何設置溢出屬性來規定相應的動做。
如何隱藏溢出元素中溢出的內容
本例演示在元素中的內容太大以致於沒法適應指定的區域時,如何設置 overflow 屬性來隱藏其內容。
如何設置瀏覽器來自動地處理溢出
本例演示如何設置瀏覽器來自動地處理溢出。
相關文章
相關標籤/搜索