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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
canvas 中如何实现物体的框选
Aug 05 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
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php生成随机颜色的方法
2014/11/13 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
简单的php购物车代码
2020/06/05 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
js实现批量删除功能
2020/08/27 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
深入浅析python with语句简介
2018/04/11 Python
对Python 数组的切片操作详解
2018/07/02 Python
python hook监听事件详解
2018/10/25 Python
Python中如何导入类示例详解
2019/04/17 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
django rest framework 自定义返回方式
2020/07/12 Python
python 发送get请求接口详解
2020/11/17 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
电子信息工程自荐信
2014/05/26 职场文书
经济管理专业求职信
2014/06/09 职场文书
python双向链表实例详解
2022/05/25 Python