pagemap 页面地图导航

最新推荐文章于 2025-02-13 15:10:27 发布

原创最新推荐文章于 2025-02-13 15:10:27 发布 · 924 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pagemap

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

pagemap

1 篇文章

订阅专栏

pagemap.js是一款基于canvas的Web页面微型导航插件，能为网页提供类似Sublime编辑器的右侧Mini导航面板效果，通过简单的HTML、CSS和JavaScript集成，即可实现页面结构的可视化导航。

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
});