js网页迷你地图插件pagemap

查看演示立即下载

插件描述：js网页迷你地图插件可以帮您快速定位到你想要的位置

pagemap

pagemap.js是一款基于canvas的web页面mini导航面板插件。该插件可以为web页面制作出类似sublime编辑器右侧的mini导航面板效果。

使用方法

在HTML文件中引入。

1	`<script` `type="text/javascript"` `src="path/to/pagemap.min.js"></script>`

HTML结构

在页面上添加一个<canvas>元素。

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

CSS样式

通过css将<canvas>元素固定在页面的右上方。

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

初始化插件

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery滑动轮播图
下一个特效：手机app食品生鲜类模板