Scrollify – jQuery全屏滚动插件
简介
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB。但功能上不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js。不过对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动。
插件地址
使用方法
1、引入文件
2、HTML
3、JavaScript
$(function() { $('.panel').css({'height': $(window).height()}); $.scrollify({ section: '.panel' }); });
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
section | 字符串 | section | 滚动元素的选择器 |
sectionName | 字符串 | section-name | 自定义锚链接,需要通过 HTML data 属性 data-section-name 指定,如 data-section-name=”home” |
easing | 字符串 | easeOutExpo | 过度效果 |
scrollSpeed | 整数 | 1100 | 过度/滚动时间,以毫秒为单位 |
offset | 整数 | 0 | 偏移, |
scrollbars | 布尔值 | true | 是否显示滚动条 |
before | 函数 | 控制 | 滚动前的回调函数 |
after | 函数 | 控制 | 滚动后的回调函数 |
相关推荐
-
jQuery Jcrop 图像裁剪 插件应用
2017-6-23
-
Slick.js幻灯片使用方法 插件应用
2017-6-3
-
jQuery响应式图片画廊插件S Gallery 插件应用
2017-12-12
-
移动端常用alert、confirm、toast等弹窗插件,兼容 jQueryZepto 插件应用
2017-12-10
-
FullPage.js全屏插件文档及使用方法 插件应用
2017-6-27
-
一个骚气的文章目录自动生成器了解一下 插件应用
2018-8-10
-
Intro.js 分步向导插件使用方法 插件应用
2017-6-3
-
jQuery Lightbox效果插件Boxer 插件应用
2017-12-12
-
轮播图FlexSlider插件使用方法及参数 插件应用
2017-6-3
-
移动端效果之Picker 插件应用
2017-12-11