為你的部落格園添加平滑移動到頁面頂端的錨點和tag雲

標籤：

首先我的目錄是在marvin的基礎上二次開發的.然後我發現錨點圖和目錄都在同一個圖上面,所以就一起用了.

返回頂部錨點:

我用以前舊版bilibili的那個函數.可以做到平滑滾動到頁面,並且在觸頂前不能向下滾屏.具體的看我參考連結.當然因為涉及到js要申請許可權,簡單的話a標籤href用#top當然可以,體驗有點差罷了.

然後因為我懶,錨點的出現條件直接和目錄的出現條件弄在一起.也就是匹配元素相對捲軸頂部的位移超過200時顯示.

tag雲:

我用Google隨便找的.用的向量繪圖.

但是這玩意有個局限性,就是其執行個體化函數限制要用元素ID.於是我用一個div包裹了標籤區的ul.然後執行個體化.執行個體化成功的時候隱藏掉標籤區和標題,設定canvas的蠕動和顯示

window.onload=function(){                          $("ul:first","#sidebar_categories").wrap("<div id=‘caonimagebi‘ style=‘display:block‘></div>")      if(!$(‘#myCanvas‘).tagcanvas({          textColour: ‘#519cea‘,          outlineColour: ‘#404040‘,          reverse: true,          depth: 0.8,          maxSpeed: 0.10        },‘caonimagebi‘)) {          console.log("日了狗了")          $(‘#myCanvasContainer‘).hide();         }        else{            $(‘#myCanvasContainer‘).css(‘display‘, ‘block‘);                $(‘#myCanvas‘).tagcanvas("setspeed", [0.015, -0.05]);                     $(‘#caonimagebi‘).css(‘display‘, ‘none‘);                                  $(‘.catListTitle:first-child‘,‘#sidebar_categories‘).empty();//去掉隨筆分類          }                  }

但是這樣有個局限性,就是因為寫在onload裡面,有點生硬,你們可以看到,這玩意像是隱搞出來的,不和諧.這就是讓我抓狂的地方了.　

　

抓狂:

我就是很好奇,為毛這個包裹方法寫在onready裡面就不行了,而且是線上的時候不行.我是有在本地測試的,本地寫在onready的時候頁面很正常,傳到部落格園就變成這樣.

部落格園,你們家的js好神奇

備忘:

1部落格園的檔案系統是虛刪除,慢更新.就是你刪了檔案還在,你刪了那個檔案上傳同名檔案的話,伺服器上的檔案還是舊版的,所以需要自己手動修改檔案名稱和相應的引用檔案名稱.

2這個目錄有一定的局限性,也就是h2,h3,h4.方法寫的不是很健壯,而且目錄的高度應該儘可能的根據標題數來計算,然後弄個上限,但是我也懶得改了.

 

參考連結:

去把bilibili的返回頂點錨點扒了下來

如何給你的為知筆記添加一個漂亮的導航目錄

http://www.goat1000.com/tagcanvas-functions.php

 

 

為你的部落格園添加平滑移動到頁面頂端的錨點和tag雲