fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动、CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备。
在线实例
使用方法
- <div id="pageContain">
- <div class="page page1 current">
- <div class="contain">
- <p class="txt">第一屏</p>
- </div>
- </div>
- <div class="page page2">
- <div class="contain">
- <p class="txt">第二屏</p>
- </div>
- </div>
- ......
- </div>
- <ul id="navBar">
- <li>1</li>
- <li>2</li>
- .......
- </ul>
复制
- var runPage;
- runPage = new FullPage({
- id: 'pageContain',
- slideTime: 800,
- effect: {
- transform: {
- translate: 'Y'
- },
- opacity: [0, 1]
- },
- mode: 'wheel, touch, nav:navBar',
- easing: 'ease'
- });
复制
参数详解
参数 | 描述 | 默认值 |
id | 外层包裹 id | - |
slideTime | 每页切换时间,单位为毫秒 | 800 |
effect | 切换效果 | - |
mode | 转换模式 | - |
callback | 滑动结束后的回调函数 | - |
prev() | 向上滚动一页/一屏 | - |
next() | 向下滚动一页/一屏 | - |
thisPage() | 返回当前的页码 | - |
go(num) | 滚动到第 num 页 | - |
相关推荐
**jQuery全屏滚动插件fullPage.js详解** 全屏滚动效果在现代网页设计中非常流行,它可以为用户提供独特的浏览体验,使网站更具视觉吸引力。fullPage.js是一款强大的jQuery插件,专为实现全屏滚动效果而设计。它不仅...
fullPage.js是一款知名的JavaScript插件,专为创建全屏滚动效果而设计。本篇文章将深入探讨类似fullPage.js的全屏滚动插件及其相关知识点。 1. **fullPage.js**: fullPage.js是由Alvaro Trigo开发的,它支持...
全屏滚动插件jQuery.fullPage.min.js是网页设计师在构建现代、引人入胜的网站时常用的一款工具。它以其高效、易用和强大的功能深受开发者喜爱。在本篇文章中,我们将深入探讨jQuery.fullPage.min.js的核心特性、使用...
3. **JavaScript初始化**:引入fullpage.js库后,使用`new fullPage.js('#fullpage')`初始化全屏滚动。你可以传递参数来定制滚动行为、导航样式等。 4. **内容交互**:结合jQuery或其他JavaScript库,可以实现滑动时...
jquery.fullPage.js
fullpage.js是一款强大的JavaScript插件,专为实现这种效果而设计,它提供了丰富的选项和定制能力,使得创建美观且交互性强的全屏滚动网站变得简单易行。 ### 1. fullpage.js基本概念 - **分页**:在fullpage.js中...
**jQuery全屏滚动插件fullPage.js详解** 全屏滚动效果在现代网页设计中非常流行,它可以为用户提供独特的浏览体验,使网站更具视觉吸引力。jQuery的fullPage.js是一款强大的插件,专门用于实现这种效果。它允许网页...
全屏滚动插件fullPage.js是一款广泛应用于网页设计中的JavaScript库,特别适合创建具有沉浸式体验的全屏滚动网站。这款插件以其丰富的功能和易用性,深受开发者喜爱。以下将详细介绍fullPage.js的核心特性及其应用。...
jquery的fullpage.js全屏制作网页酷炫
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时...
jQuery插件fullPage.js是一个专门用于实现这种效果的工具,它提供了丰富的功能和定制选项,使开发者能够轻松创建美观且交互性强的全屏滚动网站。 **基本使用** 在使用fullPage.js前,需要引入相关的CSS和...
**全屏滚动插件fullPage.js详解** 全屏滚动插件fullPage.js是现代网页设计中常用的一个工具,尤其在创建具有视觉冲击力和交互体验的单页面网站时,它的功能和灵活性备受开发者青睐。fullPage.js是基于jQuery库开发...
在本篇文章中,我们将深入探讨如何使用jQuery UI以及`fullPage.js`来创建全屏滚动的页面。 首先,jQuery UI是一个强大的JavaScript库,提供了丰富的用户界面组件,如对话框、日期选择器、拖放功能等。然而,对于...
fullpage.js是一款强大的JavaScript插件,专为实现全屏滚动页面设计而生。本教程将深入探讨fullpage.js的使用方法和功能,同时结合animate动画库,让页面滚动更加生动有趣。 ### fullpage.js介绍 fullpage.js由...
jquery.fullPage.css
"jQuery全屏滚动插件fullPage.js演示"的压缩包很可能包含了完整的示例代码和说明文档,帮助开发者快速理解和应用fullPage.js。这些资源对于初学者来说尤其宝贵,他们可以通过查看和修改示例代码来学习如何配置和...
fullpage.js结合animate.css实现滚屏动画,每段代码都加有详细注释 文章地址:https://blog.csdn.net/cplvfx/article/details/80649574
全屏滚动插件fullPage.js是网页设计中一个流行的JavaScript解决方案,专门用于创建具有全屏滚动效果的单页网站。它以其易用性和灵活性著称,能帮助开发者快速构建具有视觉冲击力的交互式网页。此插件不仅支持独立...