罗和正单双中特

js网页迷你地图插件pagemap

所属分类:UI-滚动

分享到微?#25490;?#21451;圈
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仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 28324  168

css3页面鼠标纵向滑动效果

css3页面鼠标纵向滑动效果
  滚动
 43748  285

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 19340  202

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 31738  257

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

取消回复
罗和正单双中特
jdb龙王捕鱼技巧视频 第19章赚钱 体彩广西11选5开奖号码 云南时时彩票 贵州十一选五任选基本走势 500万彩票首页 体彩6十1中奖对照表 七星彩的9zhu小复式组合 捕鱼来了怎么刷金币 喜乐彩首页