pagemap.js
pagemap.js是一款基於canvas的web頁面mini導航面板插件。該插件可以爲web頁面製作出類似sublime編輯器右側的mini導航面板效果。
pagemap npm install
npm i pagemap
html導入
<script type="text/javascript" src="/pagemap.min.js"></script>
或者
import pagemap from "pagemap"
html添加一個canvas元素,繪製微地圖需要。
<canvas id='map'></canvas>
CSS樣式
#map {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
z-index: 100;
}
初始化插件
pagemap(document.querySelector('#map'));
// 樣式可以修改
pagemap(document.querySelector('#map'), {
viewport: null,
styles: {
'header,footer,section,article': 'rgba(0,0,0,0.08)',
'h1,a': 'rgba(0,0,0,0.10)',
'h2,h3,h4': 'rgba(0,0,0,0.08)'
},
back: 'rgba(0,0,0,0.02)',
view: 'rgba(0,0,0,0.05)',
drag: 'rgba(0,0,0,0.10)',
interval: null
});
展示: