jQuery全屏插件fullPage的基本使用

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
兼容性
fullpage兼容jquery1.7+
使用方式
第一步：引入文件

 <link rel="stylesheet" href="css/jquery.fullpage.css"><script src="js/jquery.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><div class="section">第四屏</div><div class="section">第五屏</div><div class="section">第六屏</div><div class="section">第七屏</div><div class="section">第八屏</div>
</div>

第四步：JS调用代码

<script>$(function(){$('#fullpage').fullpage();});
</script>

效果就出来了
配置

方法

回调函数

jQuery全屏插件fullPage的基本使用相关推荐

php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
html全屏漂浮,jquery全屏漂浮广告插件，可点击关闭(原创)
jquery全屏漂浮广告插件兼容主流浏览器实现简单调用简单在线预览源码下载 jquery全屏漂浮广告插件兼容主流浏览器实现非常简单说明:jquery在1.9开始不支持.live()方法 ...
html5段落跳转,jQuery全屏跟随和可平滑跳转到相应文章段落的导航菜单
这是一款非常实用的jQuery全屏跟随和可平滑跳转到相应文章段落的导航菜单插件.该菜单插件会自动检测你的HTML结构,搜索内容的标题并生成对应的菜单.当用户滚动页面,菜单将处于固定位置,并高亮当前用户 ...
分享一款jQuery全屏滚动页面特性案例
分享一款jQuery全屏滚动页面特性案例. 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子.可以说全屏滚动页面越来越受欢迎.它们就像是竖着的图片轮转一样. 这样的页面有很多,如:iPhon ...
java_eclipse_maven_svn_主题彩色插件_全屏插件
作为一名不算新手的猿猿,还来纠结IDE环境搭建实属不该,不过着实纠结了不少时间. target: eclipse + maven +svn + 设置默认编码+全屏绕的路就不说了,直奔主题,由于mav ...
eclipse,aptana,zendstudio,flex全屏插件
在网络上摸索aptana全屏插件找不到,唯有找eclipse插件才有.真是无语. cnblogs的关键字做的不错,特此记录,让那些后来搜索aptana,zendstudio全屏插件的人们少浪费点时间. ...
自动打开html网页脚本,开启网页全屏插件(自动开启网页全屏脚本js插件)
开启网页全屏插件(自动开启网页全屏脚本js插件)是由作者陈鹏杰分享的一个浏览器扩展插件.通过本脚本,用户在网页加载完4秒后,启动网页全屏.非常简单方便快捷! 脚本描述: 在以下网页开启网页全屏 b 站 ...
jQuery全屏滚动插件fullPage.js
演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...
jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...

jQuery全屏插件fullPage的基本使用

jQuery全屏插件fullPage的基本使用相关推荐

最新文章

热门文章