IT博客汇 | skrollr-decks大屏介绍型导航插件

skrollr-decks大屏介绍型导航插件

轩枫发表于 2015-08-25 13:23:42

skrollr-decks简介

利用skrollr-decks，可实现点击跳转至网页中的模块，实现模块间的切换。

使用方法

引入skrollr.js：https://github.com/Prinzhorn/skrollr

引入skrollr.deck.js：https://github.com/TrySound/skrollr-decks

Demo

http://www.xuanfengge.com/demo/201508/skrollr-decks/

HTML

<body class="skrollr-decks-init" data-skrollr-decks-history="true">
    <main id="skrollr-body">
        <section class="skrollr-deck"></section>
        <section class="skrollr-deck"></section>
        <section class="skrollr-deck"></section>
    </main>
</body>

API

skrollr.decks.init(options)

options.decks：decks的classname

offset(10)：当自动滚动时，通过offset来判断

duration(600)：动画时间

easing(quaratic)：动画形式

delay(500)：延迟滚动时间

autoscroll(true)：是否自动滚动

history(false)：记录hash

skrollr.decks.refresh()

重新计算所有模块的高度，如当部分内容被加载进来时需要刷新。

skrollr.decks.animateTo(anchor, noAnimation)

anchor：滚动至某结点,#id或up、‘down

noAnimation：取消动画

skrollr.decks.on(events, callback)

change(activeDeck)：当前屏hash发生改变时

render(e)：skroll render事件