全屏滚动实现:fullPage.js和fullPage
fullPage.js和fullPage都能实现全屏滚动,二者差别是:fullPage.js需依赖于JQuery库,而fullPage不须要依赖不论什么一个js库。能够单独使用。
一、fullPage.js实现全屏
fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js
1、基本演示
1.1 引入文件
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />
<!-- fullpage.js依赖于jquery库 -->
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"></script>
1.2 css:引入的css并非给元素设置样式的。元素的样式须要自己写
<style type="text/css">
body
{
color: #FFFFFF;
}
.section1
{
background-color: #BFDA00;
}
.section2
{
background-color: #2EBE21;
}
.section3
{
background-color: #2C3E50;
}
.section4
{
background-color: #FF9900;
}
</style>
1.3 html:每个section代码一屏,默认从第一屏显示,若须要自己定义从某屏開始显示,为section加入active类。演示样例默认从第三屏显示
<div id="ido">
<div class="section section1">
<h1>每个section是一屏,这是第一屏</h3>
</div>
<div class="section section2">
<h1>每个section是一屏,这是第二屏</h3>
</div>
<div class="section section3 active">
<h1>每个section是一屏。这是第三屏</h3>
</div>
<div class="section section4">
<h1>每个section是一屏。这是第四屏</h3>
</div>
</div>
1.4 js:
<script type="text/javascript">
$(function() {
$("#ido").fullpage();
});
</script>
效果:http://denon-7c931.coding.io/fullpagejs.html
1.5 能够在某屏中再加入子滚动屏,借助slide类。改动上述第二个section例如以下:
<div class="section section2" style="text-align:center">
<h1 class="slide">第二屏的第一屏</h1>
<h1 class="slide">第二屏的第二屏</h1>
<h1 class="slide">第二屏的第三屏</h1>
<h1 class="slide">第二屏的第四屏</h1>
</div>
效果:http://denon-7c931.coding.io/fullpagejs.html
1.6 加入背景屏,在html加入两个section
<div class="section section5">
<h1>每个section是一屏,这是第5屏--图片背景</h3>
</div>
<div class="section section6">
<h1>每个section是一屏,这是第6屏--图片背景</h3>
</div>
加入css
.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}
.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}
效果:http://denon-7c931.coding.io/bjfull.html
(滚动到5和6屏)
$(function() {
$("#ido").fullpage(
{
continuousVertical: true
});
});
效果:http://denon-7c931.coding.io/xhfull.html (滚动到第6屏。再向下滚动时自己主动回到第一屏)
1.8 绑定菜单:加入菜单项
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
<li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
<li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
<li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
<li data-menuanchor="page5"><a href="#page5">第5屏</a></li>
<li data-menuanchor="page6"><a href="#page6">第6屏</a></li>
</ul>
加入css
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
改动js
$(function() {
$("#ido").fullpage(
{
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu', });
});
效果:http://denon-7c931.coding.io/memufull.html
1.9 导航演示:设置’navigation': true,
$(function() {
$("#ido").fullpage(
{
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu', // 导航
'navigation': true,
});
});
效果:http://denon-7c931.coding.io/navfull.html (导航在右側)
2、配置如图
假设须要配置easing和scrollOverflow,则须要引入额外的js(在vendors文件夹下)
<!-- jquery.easings.min.js 用于 easing 參数,也能够使用完整的 jQuery UI 取代。假设不须要设置 easing 參数,可去掉改文件 -->
<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"></script>
<!-- 假设 scrollOverflow 设置为 true。则须要引入 jquery.slimscroll.min.js。普通情况下不须要 -->
<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"></script>
二、fullPage实现全屏
fullPage 是一款不依赖不论什么 js 库的全屏滚动组件,支持垂直/水平滚动、CSS3 旋转/缩放动画,支持 IE5.5+。支持移动设备。其Github地址:https://github.com/powy1993/fullpage
1、基本演示
<!-- 引入js -->
<script type="text/javascript" src="./fullpage-master/js/fullPage.min.js"></script>
1.1 垂直滚动
css
body {
width: 100%;
*cursor: default;
overflow: hidden;
font: 16px/1.5 "Microsoft YaHei";
}
div,p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#pageContain {
overflow: hidden;
}
.page {
display: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.contain {
width: 100%;
height: 100%;
display: none;
position: relative;
z-index: 0;
}
.current .contain,.slide .contain {
display: block;
}
.current {
display: block;
z-index: 1;
}
.slide {
display: block;
z-index: 2;
}
.page1 {
background: #37c1e3;
}
.page2 {
background: #009922;
}
.page3 {
background: #992211;
}
.page4 {
background: #ff00ff;
}
.page5 {
background: #00ff00;
}
.page6 {
background: #22ffff;
}
#navBar {
z-index: 3;
position: absolute;
top: 10%;
right: 3%;
}
#navBar .active {
background: #ccc;
}
#navBar li {
cursor: pointer;
margin-bottom: 10px;
transition: all .7s ease;
border-radius: 50%;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
}
h1
{
text-align: center;
margin-top: 20%;
}
html
<div id="pageContain">
<div class="page page1 current">
<div class="contain">
<h1 class="txt">第一屏</h1>
</div>
</div> <div class="page page2">
<div class="contain">
<h1 class="txt">第二屏</h1>
</div>
</div> <div class="page page3">
<div class="contain">
<h1 class="txt">第三屏</h1>
</div>
</div> <div class="page page4">
<div class="contain">
<h1 class="txt">第四屏</h1>
</div>
</div> <div class="page page5">
<div class="contain">
<h1 class="txt">第五屏</h1>
</div>
</div>
</div> <ul id="navBar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
js
var runPage;
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'Y' //垂直滚动。改为X则是水平滚动
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
});
var runPage;
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'X',
scale: [0, 1],
rotate: [270, 0]
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
});
var runPage, interval, autoPlay; autoPlay = function(to) {
clearTimeout(interval);
interval = setTimeout(function() {
runPage.go(to);
}, 1000);
}
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'X',
scale: [0, 1],
rotate: [270, 0]
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease',
callback: function(index, thisPage){
index = index + 1 > 3 ? 0 : index + 1;
autoPlay(index);
}
});
interval = setTimeout(function() {
runPage.go(runPage.thisPage() + 1);
}, 1000);
2、配置如图
全屏滚动实现:fullPage.js和fullPage的更多相关文章
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- 全屏滚动插件pagePiling.js
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- FullPage.js – 轻松实现全屏滚动(单页网站)效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- jQuery+fullPage.js演示10种全屏滚动
基本演示 背景演示 循环演示 回调函数演示 绑定菜单演示 项目导航演示 自动滚动 slide自动滚动 响应式 下载地址 实例代码 <!DOCTYPE html> <html lang ...
- jQuery fullPage.js 全屏滚动
fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 《fullPage.js》创建全屏滚动的网站
插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
随机推荐
- 关于ssh加密方式的理解
最近公司服务器被挖矿,所以更换了ssh的连接方式,从之前的密码登陆更换为密钥登陆方式,且禁止了密码登陆.所以在配置这个密钥的过程中,顺带了解了些ssh的原理和相关知识.通用的开源 1.ssh是什么,为 ...
- 48.自用qss
/* R1 */ QDialog { background-image: url(:/images/background.png); } /* R2 */ QLabel { font: 9pt; co ...
- c语言open()介绍
2013-09-0914:40:13 1. 头文件: #include <sys/types.h> #include <sys/stat.h> #include <fcn ...
- 3.Ventuz Designer新建项目Demo
Ventuz Designer新建项目Demo 1.打开ventuz,点Recent Projects>New Project,在弹出的界面填写具体项目信息,如下图: 图1.1 图1.2 2.在 ...
- Javassist介绍
要想将编译时不存在的类在运行时动态创建并加载,通常有两种策略: 1. 动态编译 2. 动态生成二进制字节码(.class) 对于第二种策略,实际上已经有诸多比较成熟的开源项目提供支持,如CGLib.A ...
- @section Scripts{}的使用
MVC视图中,Javascripts代码被放于下面的Razor代码中(@section Scripts{}). 好处:在视图进行JavaScript编程时,是一个很好的实践,在共享视图(_Layout ...
- python第三方库 pip 豆瓣源
pip install xxx -i http://pypi.douban.com/simple/ xxx 为包名
- matplotlib简介-高质量图形输出
Matplotlib 是一个用来绘制二维图形的 Python 模块,它克隆了许多 Matlab 中的函数, 用以帮助 Python 用户轻松获得高质量(达到出版水平)的二维图形. 文章来源:http: ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面
http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- 应用七:Vue之适配test环境变量(2.0版)
在我们使用vue-cli创建的项目中,默认只有开发development和生产production两种环境变量:但在实际的项目开发过程中往往都会有测试环境,下面就来说一下如何适配测试环境test的环境 ...