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

这里用到了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. Linux下安装JDK多种方式

    一.环境说明: 操作系统:Linux xx- -.el6.x86_64 # SMP Thu Jul :: UTC x86_64 x86_64 x86_64 GNU/Linux jdk版本:java-- ...

  2. BlockingQueue使用

    import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import ja ...

  3. ASP.NET4.5Web API及非同步程序开发系列(1)

    认识非同步程序开发设计模型 从VS2012开始引入的新的非同步程序设计的支持-------async/await设计模型 之前的当我们支持非同步作业的时候,往往使用多线程开解决,我们比较熟悉的就是 执 ...

  4. Reversing Bits in C

    英文原文: http://corner.squareup.com/2013/07/reversing-bits-on-arm.html 本文讲解翻转bit位的一些方法,例如如何将1001 1101变为 ...

  5. javascript数组去重的两个方法

    方法一: 创建一个临时数组,判断目标数组中每个元素是否在临时数组中,如果不在就添加进临时数组,最后return临时数组 <script> var arr=[1,2,3,4,5,1,2,3, ...

  6. 2015ACM/ICPC亚洲区长春站

    5532 Almost Sorted Array 题目大意:给你一个序列,如果它拿掉其中一个数后,可以是该序列成为非递减或非递增序列,则输出YES. 有两种思路,第一种代码比较简单,是LIS,复杂度n ...

  7. jquery Ajax 案例

    html <div class="data"><ul></ul></div> <div id="load" ...

  8. POJ3279 Fliptile(暴力)

    有一种暴力是这样的,枚举一边,确定另一边. 这一题是这么解的,枚举第一行所有翻转情况,然后剩下几行其实是确定的,因为前i行翻转方式确定后只能通过第i+1行的翻转来改变第i行的状态,于是依次模拟求出剩下 ...

  9. MySQL 存储过程基本函数

    字符串类 CHARSET(str) //返回字串字符集CONCAT (string2 [,... ]) //连接字串INSTR (string ,substring ) //返回substring首次 ...

  10. 归一化交叉相关Normalization cross correlation (NCC)

    归一化交叉相关Normalization cross correlation (NCC) 相关系数,图像匹配 NCC正如其名字,是用来描述两个目标的相关程度的,也就是说可以用来刻画目标间的相似性.一般 ...