• 制作手机相册 全屏滚动插件fullpage.js


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

     这里用到了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

      

    
    
  • 相关阅读:
    testNg vs junit 4.X @Test
    lombok+slf4j+logback SLF4J和Logback日志框架详解
    IntelliJ IDEA 当pom.xml更新时,自动加载pom.xml
    运算符重载具体解释
    设计模式之十八:桥接模式(Bridge)
    无限层级的组织机构
    实战Jquery(一)--username校验
    Android错误之--Error retrieving parent for item: No resource found that matches the given name &#39;Theme.A
    hibernate 缓存
    android --多线程下载
  • 原文地址:https://www.cnblogs.com/liulan/p/5572630.html
Copyright © 2020-2023  润新知