和 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全屏滚动插件的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  3. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  4. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  5. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

  6. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  7. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

  8. jQuery全屏滚动插件fullPage使用

    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...

  9. jQuery全屏滚动插件fullPage.js

    github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...

随机推荐

  1. HDU 1333 基础数论 暴力

    定义一种数位simth数,该数的各位之和等于其所有质因子所有位数字之和,现给出n求大于n的最小该种数,n最大不超过8位,那么直接暴力就可以了. /** @Date : 2017-09-08 14:12 ...

  2. 779D. String Game 二分 水

    Link 题意: 给出两字符串$a$,$b$及一个序列,要求从前往后按照序列删掉$a$上的字符,问最少删多少使$b$串不为a的子串 思路: 限制低,直接二分答案,即二分序列位置,不断check即可. ...

  3. php每天自动备份数据库

    php每天自动备份数据库 windows中如何添加计划任务? 前提:添加windows计划任务,每天打开备份数据库的页面.1.打开http://localhost/thinkphp3.2/index. ...

  4. OWL库(叙词表构建本体OWL库)程序说明文档

    本体程序(叙词表转化OWL)及相关数据 程序已有资源:

  5. Ubuntu 14.04 安装Visual studio Code

    上一篇简单介绍了Ubuntu 14.04上如何创建.运行 hello world 程序. 这篇介绍Ubuntu 14.04如何安装Visual studio Code. 网上推荐的有通过Ubuntu ...

  6. 教你Snapseed软件八个常用调图工具

    教你Snapseed软件八个常用调图工具 教你Snapseed(指划修图)软件八个常用调图工具 老阿·编写 Snapseed是目前手机摄影修图中功能最强大的一款软件,很多功能很像电脑用的Photosh ...

  7. 新手应知道的ASP.NET代码编写规范

    1.局部变量的名称要有意义,尽量用对应的英文命名,比如“用户姓名”变量,不要用aa bb cc等来命名,而要使用userName. 2.不要使用单个字母的变量,如i.n.x等.而要使用index.te ...

  8. 【BZOJ】1741: [Usaco2005 nov]Asteroids 穿越小行星群

    [题意]给定n*n网格,有k个物品,每次可以消灭一行或一列,求消灭掉所有物品的最少操作次数. [算法]二分图最小覆盖 [题解]此题是最小覆盖模型的出处. 将物品的x-y连边建立二分图. 最小覆盖:选择 ...

  9. Yii2 的 redis 应用

    在应用的时候需要先对yii2进行扩展安装 如果装有composer直接运行 php composer.phar require --prefer-dist yiisoft/yii2-redis 当然也 ...

  10. node、npm及node_modules中依赖的版本更新

    好久没用node了,想重新拾起来发现node还有相关模块的版本都太低了,使用npm install全是报版本低的警告. 这里记录一下,版本管理和node_modules更新的方法. 我用的是Windo ...