最新消息:

第96款插件:jquery-fullpage-js制作页全屏滚动插件

Jquery插件 杨红伟 6253浏览 0评论

一、插件介绍

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面,QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

二、插件图片示例


 

三、插件作者下载地址

作者:Alvaro Trigo
官方网址: https://github.com/alvarotrigo/fullPage.js
目前版本: 2.0.7  
官方案例下载: http://www.ijquery.cn/demo/fullpage/fullPage.js-2.0.7.zip

四、兼容性

兼容 jQuery 1.7+,建议使用 1.9+ 版本,效率更高。

IE Chrome Firefox Opera Safari
IE8+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

五、使用教程

 

引用文件:

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
 
<!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
 
<!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>
 
<script src="js/jquery.fullPage.js"></script>

HTML代码:

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
	</div>
    <div class="section">第四屏</div>
</div>

JS代码:

$(function(){
    $('#fullpage').fullpage();
});

六、插件参数

属性/方法 类型 默认值 说明
sectionContainer 字符串 section 绑定/制定元素,可以是标签或 class
easing 字符串 ease 动画过度效果,可选 ease / linear / ease-in
animationTime 整数 1000 动画过度时间,以毫秒为单位
pagination 布尔值 true 显示右侧圆点项目导航
updateURL 布尔值 false URL 显示命名锚记
beforeMove 函数 滚动前的回调函数
afterMove 函数 滚动后的回调函数
loop 布尔值 true 循环滚动
keyboard 布尔值 true 键盘控制,支持左右上下/ Page Up / Page Donw / Home / End
responsiveFallback 布尔值/整数 false 回退,即使用浏览器自带滚动,默认我 false,既不使用浏览器自带滚动。也可以指定一个固定值,当页面的宽度小于这个值时,将自动回退
direction 字符串 vertical 页面滚动方向,可选 vertical(垂直/竖向)和 horizontal(水平/横向)

公共方法

方法 说明
moveUp() 向上滚动
moveDown() 向下滚动
moveTo(page_index) 滚动到,如 $(‘.main’).moveTo(3);


发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址