全屏滚动插件使用示例

刚看完公司网站，全屏滚动，显著提升了官网的浏览体验。然后总结使用fullpage.js的方法欢迎指正

一. fullpage.js简介

Fullpage.js是一套实现全屏浏览器滚动的js插件，现在很多网站都用它来实现更好的浏览体验。可以实现的功能：

支持向前和向后以及键盘控制多个回调功能支持手机和平板触摸事件支持CSS3动画支持窗口缩放在窗口缩放期间自动调整可以设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐等

二、插件下载

NPM | NPM install full page . jsbower | bower install full page . jsgithub | https://github.com/alvarrotrigo/full page . js/cdn | https://cdnjs.com/libraries/full page . js

三.文献介绍方式

Link rel='样式表' href=' CSS/jquery . fullpage . CSS ' script src=' http : js/jquery . min . js '/script script src=' http 3360 js/jquery . full page . js '/script注意：在引入full page之前，我们必须先引入jquery。刚开始写演示的时候，因为顺序不对，效果无法实现，浏览器报告fullpage.js中的jquery没有定义。

4.编写html代码

Div ID=' fullpage ' div class=' section ' section 1/div class=' section ' section 2/div div class=' section ' section 3/div div class=' section ' section 4/div/div所有内容都包含在ID名为full page的div中，不能添加到正文中。类名为的div元素。部分是单页。可以通过鼠标滚轮和键盘控制不同页面之间的替换，也可以设置列表导航。同时，如果你想在一页中水平剪切屏幕，你可以在分栏中添加分栏幻灯片。分栏代码如下：

div class=' section ' div class=' slide ' slide 1/div class=' slide ' slide 2/div div class=' slide ' slide 3/div div class=' slide ' slide 4/div/div .初始化整页

$(文档)。ready (function () {$ ('# fullpage '))。整页({ 0.//选项详见https://github.com/alvarotrigo/fullPage.js/})；});设置侧边栏导航

该导航通常在网站设计中可用。fullpage的默认导航样式是小黑点，也支持其他样式。

ul id='myMenu' li数据-menuanchor=' first page ' class=' active ' a href=' # first page '第一节/a/li li数据-menuanchor=' second page ' a href=' # second page '第二节/a/li数据-menuanchor=' third page ' a href=' # third page '第三节/a/li数据-menuanchor=' fourth page ' a href=' # fourth page '第四节/a/li/ul.} $('#fullpage ')。full page({ anchors :[' first page '，' secondPage '，' thirdPage '，' fourthPage '，' lastPage']，menu : ' # my menu ' })；不及物动词遇到的问题和解决办法

测试网站后发现，在fullpage.js文件初始化之前就已经加载了DOM css，所有显示的样式内容都会挤在一起，加载后会恢复。如果网站优化，网速强，这个时间会比较短，但还是会带来不好的用户体验。然后尝试各种解决方案：1。div。section section { overflow : hidden }经过测试，这个方法没有用。

2.设置空白蒙版，只在所有页面完成前显示，主题内容隐藏。加载完成后，内容显示屏蔽将被移除。当然也可以在蒙版图层中设置网站相关内容。具体实现方法演示：

超文本标记语言头元http-equiv='内容-类型' Content=' text/html；charset=gb2312' title无标题文档/title脚本语言=' JavaScript '类型=' text/JavaScript '函数showAllContent(状态1，状态2){文档。getelementbyidx('显示内容')。风格。显示=状态1；文件。getelementbyidx(' showLoad ')。风格。显示=状态2；}/script/head body OnLoad=' showall content '(，' none ')' div id=' showLoad ' style=' z-index :2；显示：块；宽度：汽车；'高度：自动'页面加载中./div div id='显示内容' style=' z-index :1'//最终要显示的内容/divscriptshowAllContent('none '，' ')；/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。