Scrollify – jQuery全屏滚动插件
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB。但功能上不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js。不过对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动。
兼容
jQuery 兼容
兼容 1.7 及以上版本。
浏览器兼容
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE9 及以上 |
Chrome |
Firefox |
Opera |
Safari |
使用方法
1、引入文件
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.scrollify.min.js"></script>
2、HTML
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
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 | 函数 | 控制 | 滚动后的回调函数 |
Scrollify – jQuery全屏滚动插件的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
- jQuery 全屏滚动插件 fullPage.js 参数说明
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...
- jQuery全屏滚动插件fullPage使用
1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
随机推荐
- HDU 1333 基础数论 暴力
定义一种数位simth数,该数的各位之和等于其所有质因子所有位数字之和,现给出n求大于n的最小该种数,n最大不超过8位,那么直接暴力就可以了. /** @Date : 2017-09-08 14:12 ...
- 779D. String Game 二分 水
Link 题意: 给出两字符串$a$,$b$及一个序列,要求从前往后按照序列删掉$a$上的字符,问最少删多少使$b$串不为a的子串 思路: 限制低,直接二分答案,即二分序列位置,不断check即可. ...
- php每天自动备份数据库
php每天自动备份数据库 windows中如何添加计划任务? 前提:添加windows计划任务,每天打开备份数据库的页面.1.打开http://localhost/thinkphp3.2/index. ...
- OWL库(叙词表构建本体OWL库)程序说明文档
本体程序(叙词表转化OWL)及相关数据 程序已有资源:
- Ubuntu 14.04 安装Visual studio Code
上一篇简单介绍了Ubuntu 14.04上如何创建.运行 hello world 程序. 这篇介绍Ubuntu 14.04如何安装Visual studio Code. 网上推荐的有通过Ubuntu ...
- 教你Snapseed软件八个常用调图工具
教你Snapseed软件八个常用调图工具 教你Snapseed(指划修图)软件八个常用调图工具 老阿·编写 Snapseed是目前手机摄影修图中功能最强大的一款软件,很多功能很像电脑用的Photosh ...
- 新手应知道的ASP.NET代码编写规范
1.局部变量的名称要有意义,尽量用对应的英文命名,比如“用户姓名”变量,不要用aa bb cc等来命名,而要使用userName. 2.不要使用单个字母的变量,如i.n.x等.而要使用index.te ...
- 【BZOJ】1741: [Usaco2005 nov]Asteroids 穿越小行星群
[题意]给定n*n网格,有k个物品,每次可以消灭一行或一列,求消灭掉所有物品的最少操作次数. [算法]二分图最小覆盖 [题解]此题是最小覆盖模型的出处. 将物品的x-y连边建立二分图. 最小覆盖:选择 ...
- Yii2 的 redis 应用
在应用的时候需要先对yii2进行扩展安装 如果装有composer直接运行 php composer.phar require --prefer-dist yiisoft/yii2-redis 当然也 ...
- node、npm及node_modules中依赖的版本更新
好久没用node了,想重新拾起来发现node还有相关模块的版本都太低了,使用npm install全是报版本低的警告. 这里记录一下,版本管理和node_modules更新的方法. 我用的是Windo ...