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

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>
<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事件

发表评论

发表评论

*

沙发空缺中,还不快抢~