注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

jQuery全屏滚动插件fullPage.js  

2014-09-14 11:59:44|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

jQuery全屏滚动插件fullPage.js

欢迎学习交流--梦幻雪冰

单屏效果如下:

jQuery全屏滚动插件fullPage.js - 梦幻雪冰 - 梦幻雪冰

简介:fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站

主要功能:

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

那么来简单实现一下单屏滚动效果吧~

欢迎学习交流--梦幻雪冰

首先引入文件:reset.css

                      jquery.fullPage.css

                      jquery.fullPage.min.js

                      jquery-1.8.3.min.js

                      jquery-ui-1.10.3.min.js

文件下载地址 访问密码 73a1   欢迎学习交流--梦幻雪冰

单屏滚动效果如下

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="jquery.fullPage.css">
<link rel="stylesheet" href="reset.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-ui-1.10.3.min.js"></script>
<script src="jquery.fullPage.min.js"></script>
<style>
/*自定义导航栏*/
.nav {
position: fixed;
left: 10px;
top: 10px;
}
.nav a,
.nav li {
float: left;
}
.nav li {
margin-right: 5px;
}
.nav a {
padding: 10px 20px;
background: #fff;
color: #4BBFC3
text-decoration: none;
}
/*选中跳转栏目的效果*/
.nav .active a{
background: #333;
}
.section {
overflow: hidden;
color: #fff;
font: 50px "Microsoft Yahei";
text-align: center;
}
</style>
<script>
$(document).ready(function() {
$.fn.fullpage({
// 设置每一屏的背景颜色
'slidesColor': ['#999', '#4BBFC3', '#7BAABE', '#f90','#1bbc9b', '#4BBFC3', '#7BAABE','#f90'],
// 定义锚链接
'anchors': ['page1', 'page2', 'page3', 'page4','page5','page6','page7','page8'],
// 是否使用 CSS3 transforms 滚动,设置为true自定义导航栏才能显示
'css3': true,
// 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动
'menu' : '.nav',
// 字体是否随着窗口缩放而缩放
'resize': true,
// 滚动速度,单位为毫秒,默认为700
'scrollingSpeed': 800
});
});
</script>
</head>
<body>
<ul id='menu' class='nav'>
<li data-menuanchor="page1"><a href="#page1" class='active'>第1个项目</a></li>
<li data-menuanchor="page2"><a href="#page2">第2个项目</a></li>
<li data-menuanchor="page3"><a href="#page3">第3个项目</a></li>
<li data-menuanchor="page4"><a href="#page4">第4个项目</a></li>
<li data-menuanchor="page5"><a href="#page5">第5个项目</a></li>
<li data-menuanchor="page6"><a href="#page6">第6个项目</a></li>
<li data-menuanchor="page7"><a href="#page7">第7个项目</a></li>
<li data-menuanchor="page8"><a href="#page8">第8个项目</a></li>
</ul>
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 【梦幻雪冰】基本演示</p>
</div>
<div class="section">
<div class="slide"><h3>第二屏的第一屏</h3></div>
<div class="slide"><h3>第二屏的第二屏</h3></div>
<div class="slide"><h3>第二屏的第三屏</h3></div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
<div class="section">
<h3>第五屏</h3>
</div>
<div class="section">
<h3>第六屏</h3>
</div>
<div class="section">
<h3>第七屏</h3>
</div>
<div class="section">
<h3>第八屏</h3>
<p>这是最后一屏:【梦幻雪冰】</p>
</div>
</body>
</html>

注意几点:

【1】结构中的div的类名为“section”,因为 jquery.fullPage.css样式已经为大家写好了

【2】JavaScript代码要写在head里面,不然会出现文本内容不能居中和滚动效果出现问题

【3】为了实现字体随着窗口缩放而缩放,字体大小中属性值的单位不要用px而是用em

【4】设置导航栏,要定义导航栏的id或者是类名,绑定到menu属性里面(#menu或者.menu),用data-menuanchor设置选中要跳转的栏目或者用data-index(设置active类名)
【5】为了防止在滚动栏目底部显示下一个栏目的问题,可以在.section类选择器里面添加一句overflow:hidden;就可以解决该问题了。

文档:
jQuery全屏滚动插件fullPage.js - 梦幻雪冰 - 梦幻雪冰
 
jQuery全屏滚动插件fullPage.js - 梦幻雪冰 - 梦幻雪冰
jQuery全屏滚动插件fullPage.js - 梦幻雪冰 - 梦幻雪冰
 
jQuery全屏滚动插件fullPage.js - 梦幻雪冰 - 梦幻雪冰
特此声明:图片来源于问说网
欢迎学习交流--梦幻雪冰
 
  评论这张
 
阅读(444)| 评论(6)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017