今天是端午自己做了一个小的送祝福链接 

这里用到了fullpage插件

$('#container').fullpage({
  navigation: false,        //navigation是否显示导航,默认为false

  easing: 'easeInQuart',

  scrollingSpeed: 400,
  loopBottom: false,
  loopTop: false,
  afterLoad: function(anchorLink, index) {//最后一页不显示向上滑动 此处index设置从1开始的
    if(index == page_num){
    $('.slide_up_tip').hide();
  }else{
    $('.slide_up_tip').show();
  }

  onLeave: function(index, nextIndex, direction) {//当页面过长导致安卓卡顿,使用下面的方法,需要在onload后显示前两页

    var index = index - 1;             //让index和jquery eq一样从0开始,省的看着心烦
    if(direction == 'down'){          //index大于第2页执行
      if(index >= 1) $('.fp-section:eq('+(index-1)+')').css('visibility', 'hidden');

                        //index小于倒数第2执行
      if(index <= page_num - 2) $('.fp-section:eq('+(index+2)+')').css('visibility', 'visible');
    }else{               //index小于倒数第2执行
      if(index <= page_num - 2) $('.fp-section:eq('+(index+1)+')').css('visibility', 'hidden');
                      //index大于第2页执行
      if(index >= 1) $('.fp-section:eq('+(index-2)+')').css('visibility', 'visible');  
    }
  }
})

官方地址:https://github.com/alvarotrigo/fullPage.js

  

												

制作手机相册 全屏滚动插件fullpage.js的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  3. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  4. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  5. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

  6. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  7. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

  8. 经典全屏滚动插件fullPage.js

    要写简单可以写的很简单,对着github上面的参数和注释随便写了个demo.这个插件十分高端大气上档次,配上良好的配色和布局,简单几笔就可以把网站装扮得十分洋气. 唯一的缺点就是,感觉对移动端的兼容性 ...

  9. jQuery全屏滚动插件fullPage.js

    github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...

随机推荐

  1. 批处理命令——call 和 start

    一.call命令总结 [1]call命令简介 学过汇编或C的朋友,肯定都知道call指令表示什么意思.其实,在这里它的意思也是一样的.在批处理脚本中,call命令用来从一个批处理脚本中调用另一个批处理 ...

  2. ASP.NET知识总结(6.一般处理程序动态处理图片(验证码、水印、缩略图))

    ->使用GDI+完成图片的处理,需要引入程序集System.Drawing ->GDI+的基本处理模型 <1>创建画布Bitmap <2>创建画图工具对象Graph ...

  3. 笔记本双系统XP与Ubuntu,重装XP后如何恢复grup引导,另附操作系统启动过程

    背景:笔记本双系统(XP与Ubuntu),其中XP系统因问题重装了一下,重装后不能识别Ubuntu系统(该系统装在另一个磁盘中),直接进入了XP系统. 解决办法:利用U盘(Ubuntu系统)启动机器, ...

  4. SPRING MVC总结

    DispatcherServlet -- 前置控制器HandlerMapping接口 -- 处理请求的映射HandlerMapping接口的实现类:DefaultAnnotationHandlerMa ...

  5. OGG-01820 Could not enable workspace

    状况: OGG replicat进程abend了,查看report显示如下问题: 2016-11-01 16:11:47  ERROR   OGG-01820  Could not enable wo ...

  6. mysql开发小结

    目录 1. 使用mybatis操作mysql数据库SUM方法返回NULL解决 2. limit m,n 1. 使用mybatis操作mysql数据库SUM方法返回NULL解决解决方案一: SELECT ...

  7. 已解决:ECSHOP安装出现date_default_timezone_get()问题

    今天在安装ECSHOP时遇到警告如下: Warning: date_default_timezone_get(): It is not safe to rely on the system's tim ...

  8. PHP无限极分类

      当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱, ...

  9. sublime text 3 使用方法

    1.Package Control 安装插件 2.Material Theme 主题 3.Emmet 自动HTML标签 4.Snippets JS自动片段 5.Advance newfile 文件夹下 ...

  10. ASP.NET常见面试题及答案(130题)

    1.C#中 property 与 attribute(抽像类)的区别,他们各有什么用处,这种机制的好处在哪里?答:property和attribute汉语都称之为属性.不过property是指类向外提 ...