fullpage插件

fullpage插件的简单介绍
一.简介:fullpage.js是一个基于jQuery的全屏滚动插件,它能够很方便&很轻松的制造出全屏网站
二.主要功能:
1.支持鼠标滚动
2.多个回调函数
3.支持手机&平板触摸事件
4.支持css3动画
5.窗口缩放时自动调整
6.可设置滚动宽度.背景颜色.斜体样式.滚动速度.循环选项.回调.文本对齐方式等
fullpage插件的下载使用
下载地址:http://github.com/alvarotrigo/fullpage.js
使用方法;
1.引入文件
1.1fullpage自己的css库文件在这里插入图片描述
1.2jQuery(版本1.6.0+)
1.3fullpage自己的js文件
1.4其他的扩展库(jQuery.easings.min.js等)



<div id="fullpage">
           <div class="section">这是第一屏</div>
             <div class="section">
	           <div class="slide">第二屏的第一张幻灯片</div>
               <div class="slide">第二屏的第二张幻灯片</div>
	           <div class="slide">第二屏的第三张幻灯片</div>
	           <div class="slide">第二屏的第四张幻灯片</div>
             </div>
          <div class="section">这是第三屏</div>
          <div class="section">这是第四屏</div>
       </div>


使用方法:

  <script>
       	$(function(){
       		$("#fullpage").fullpage();
       	})
       </script>

配置项:
sectionsColor: 可以为每一个section设置背景色
controlArrows: 定义是否通过箭头来控制slide幻灯片,默认为true,当我们设置为false,
幻灯片两侧的箭头会消 失,在移动设备上可以通过滑动来操作幻灯片
navigation: 是否显示导航,默认为false,如果设置成true,会显示小圆点,作为导航
navigationPosition: 导航小圆点的位置,可以设置为left或者right
navigationTooltips: 导航小圆点的tooltips设置,默认是[],注意按照顺序设置
showActiveTooltip: 是否显示当前页面的导航的tooltip信息,默认为false;

      $.fn.fullpage.方法名
        方法
        moveSectionUp(): 向上滚动一页 
        moveSectionDown(): 向下滚动一页 
        moveTo(section,slide): 滚动到第几页,第几个幻灯片,注意,页面是从1开始,而     幻灯片是从0开始计算
        silentMoveTo(section,slide) : 滚动到第几页,和moveTo一样,但是没有动画效果
        回调函数
        afterRender(): 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
        onLeave(index,nextIndex,direction) 在我们离开一个section时,会触发一次此回调函数,接收index,nextIndex和direction3个参数 
        index: 是离开的页面的序号,从 1 开始, 
        nextIndex:是滚动到的目标页面的序号,从 1 开始 
        direction:判断向上滑动还是往下滑动,值是 up 或者 down 

  

fullpage插件简介
很方便,很轻松制作全屏页面
fullpage插件下载使用
使用步骤
引入文件
页面骨架
fullpage方法
fullpage插件常用API
配置项、方法、回调函数


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值