js网页迷你地图插件pagemap

所属分类:UI-滚动

 15447  201  查看评论 (0)
分享到微信朋友圈
X
js网页迷你地图插件pagemap ie兼容8

pagemap

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

使用方法

在HTML文件中引入。

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

 HTML结构

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

<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
});
相关插件-滚动

jQuery上下左右滚动插件rollSlide.js

实现上下左右自动滚动、无缝滚动
  滚动
 69181  559

滚动条

可定制的滚动条,通过js+css实现
  滚动
 53248  335

jQuery仿京东楼层滑动侧边栏高亮(原创)

jQuery模仿京东侧边栏点击滑动到该楼层,同时侧边栏随着页面滚动对应导航高亮。
  滚动
 38914  408

jquery逐条文字向上滚动

jquery逐条文字向上滚动效果
  滚动
 50960  426

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复