[JS插件] fullPage:适合移动端web整屏滚动组件
来源:互联网 发布:淘宝里api什么意思 编辑:程序博客网 时间:2024/06/05 20:29
与 fullPage.js 相比,fullpage 不依赖任何 js 库,可独立使用。功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持 fullPage.js 所没有的水平滚动。兼容桌面端(ie5.5+) 和 手机端。
教程地址:http://www.dowebok.com/143.html
代码出处:https://github.com/powy1993/fullpage
使用说明:
一、下载代码
在 https://github.com/powy1993/fullpage 下载源代码
二、构建网页,引入相关文件
1、新建html页面,如果是移动端看的话,需要在页面头部插入视口说明:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
2、引入 fullPage.min.js 文件。
<script src="http://www.dowebok.com/fullPage.min.js"></script>
三、写出你要分几屏的html结构,并配上样式
1、在页面里写出你要分几屏的html代码,并把他们都套在一个层内,假设你要分2屏,如下:
<div id="pageContain"> <div class="page page1 current"> <div class="contain"> <p class="txt">第一屏</p> </div> </div> <div class="page page2"> <div class="contain"> <p class="txt">第二屏</p> </div> </div></div>
2、为这个结构配上样式,如下:
#pageContain { overflow: hidden; }.page { display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width:76.8rem; }.contain { display: none; position: relative; z-index: 0; width: 100%; height: 100%; }.current .contain,.slide .contain { display: block; }.current { display: block; z-index: 1; }.slide { display: block; z-index: 2; }.swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important; }#navBar { display:none;}
四、写入JavaScript启动代码
<script>$(window).load(function() {var runPage;runPage = new FullPage({ id : 'pageContain', // id of contain slideTime : 800, // time of slide continuous : false, // create an infinite feel with no endpoints effect : { // slide effect transform : { translate : 'Y', // 'X'|'Y'|'XY'|'none' scale : [.1, 1], // [scalefrom, scaleto] rotate : [270, 0] // [rotatefrom, rotateto] }, opacity : [0, 1] // [opacityfrom, opacityto] }, mode : 'wheel,touch,nav:navBar', // mode of fullpage easing : 'ease' // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];});});</script>
如果不用jquery,可以用js的写法代替$选择符:window.onload=function(){}
最后提醒一下,一定不要忘记写上分页导航列表,缺少这个列表就不起作用了,可以用样式隐藏它。
<ul id="navBar"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul>
0 0
- [JS插件] fullPage:适合移动端web整屏滚动组件
- fullPage教程 -- 整屏滚动效果插件 fullpage详解e
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
- FullPage.js全屏滚动插件
- fullpage.js---全屏滚动插件
- fullPage.js全屏滚动插件
- 全屏滚动插件fullPage.js
- 全屏滚动插件fullPage.js
- 整屏滚动效果插件 fullpage详解
- 整屏滚动效果插件 fullpage详解
- 移动滑屏web框架之slip.js fullpage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js演示
- 利用FullPage.js实现全屏滚动插件
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- linux yum命令详解
- Spring-IOC容器的配置
- git怎样删除未监视的文件untracked files
- Windchill的历史
- Effective C++ ——初始化
- [JS插件] fullPage:适合移动端web整屏滚动组件
- GetComponentsInChildren(); 使用方法
- APP开发中设计规范的重要性
- 【Code Forces 320C】【贪心+讨论】A Problem about Polyline 点在折线段上求最小的波浪长度
- 输出全排列的方案
- 通达OA-如何在工作流表单中添加按钮
- js之window对象操作
- 输出组合排列的方案
- iOS 8 Metal Swift教程 :开始学习