fullpage.js全屏滚动插件使用实例


Posted in Javascript onSeptember 06, 2016

刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验。遂总结一下使用fullpage.js的方法。欢迎指正

一. fullpage.js简介

fullpage.js全屏滚动插件使用实例 

fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验。
 可以实现的功能:

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

二.插件下载

npm|npm install fullpage.js
bower|bower install fullpage.js
github|https://github.com/alvarotrigo/fullPage.js/
cdn|https://cdnjs.com/libraries/fullPage.js

三.文件引入方式 

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

注意:一定要先引入jquery,再引入fullpage。我刚开始写demo的时候,因为顺序错误,导致不能实现效果,浏览器报错fullpage.js中的jquery未定义。 

四. 写html代码 

<div id="fullpage">
    <div class="section">section1</div>
    <div class="section">section2</div>
    <div class="section">section3</div>
    <div class="section">section4</div>
</div>

所有的内容包含在ID名为fullpage的div内,不可以给body加此。
 类名为.section的div元素便是一个单页,通过鼠标滚轮和键盘可控制不同页面之间的替换,也可设置列表导航。
 同时,如果要在一个页面内做横向的切屏效果,可以在div.section中添加div.slide。代码如下: 

<div class="section">
  <div class="slide"> Slide 1 </div>
  <div class="slide"> Slide 2 </div>
  <div class="slide"> Slide 3 </div>
  <div class="slide"> Slide 4 </div>
</div>

五.初始化fullpage 

$(document).ready(function() {
  $('#fullpage').fullpage(
    {
      .......
      //options 详情参看https://github.com/alvarotrigo/fullPage.js/
    }  
  );
});

设置侧边栏导航 

这个导航一般网站设计都会有,fullpage默认的导航样式是小黑点,也支持设置别的样式。

<ul id="myMenu">
      <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
      <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
      <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
      <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
#myMenu{
  position:fixed;
    ...
} 
$('#fullpage').fullpage({
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
  menu: '#myMenu'
});

六.遇到的问题及解决思路 

在网站做好后测试时发现,刚进入页面,在fullpage.js文件未完成初始化之前,此时DOM css正在加载中,所有已显示的样式内容会挤在一块,当加载完之后就会恢复。如果网站优化过关且网速给力的话,这段时间会比较短,但仍会带来不好的用户体验。
 遂尝试各种解决方法:
 1.div.section
 section{overflow:hidden}
经测,这个方法并没有什么卵用。

 2.设置一个空白遮罩,在所有页面完成之前只显示该遮罩,主题内容隐藏,待加载完成之后,内容显示遮罩去除。当然也可以在遮罩层设置网站相关内容。
具体的实现方法demo: 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript">
        function showAllContent(status1,status2){
         document.getElementByIdx("showContent").style.display=status1;
         document.getElementByIdx("showLoad").style.display=status2;
      }
    </script>
  </head>
<body onLoad='showAllContent("","none")'>
<div id="showLoad" style="z-index:2; display:block; width:auto; height:auto;">页面加载中......</div>
<div id="showContent" style="z-index:1; ">
//最终要显示的内容
</div>
<script>showAllContent("none","");</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
JavaScript 拾漏补遗
Dec 27 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 #Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 #Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 #Javascript
Vue表单实例代码
Sep 05 #Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 #Javascript
JS实现的手机端精简幻灯片效果
Sep 05 #Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 #Javascript
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
七个很有意思的PHP函数
2014/05/12 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Django卸载之后重新安装的方法
2017/03/15 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python中的全局变量如何理解
2020/06/04 Python
数学专业推荐信范文
2013/11/21 职场文书
会计专业自我评价
2014/02/12 职场文书
相亲大会策划方案
2014/06/05 职场文书
学习礼仪心得体会
2014/09/01 职场文书
继承公证书格式
2015/01/26 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
python Polars库的使用简介
2021/04/21 Python