pagemap（缩略导航图）

pagemap
github：https://github.com/lrsjng/pagemap
一个 JS 库，在网页插入迷你的页面缩略导航图，用户可以点击这个图的不同部分，实现快速导航。

示例

add a canvas tag to your HTML page:

<canvas id='map'></canvas>

fix it’s position on the screen:

#map {
  position: fixed;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  z-index: 100;
}

init and style the mini 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
});