这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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>
来源: http://www.phperz.com/article/17/0711/332065.html