滑屏

  1. 第三方插件FullPage（地址：https://github.com/powy1993/fullpage ）

  2. 使用方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    runPage = new FullPage({
        id: 'pageContain', // id of contain
        slideTime: 800, // time of slide
        continuous: true, // create an infinite feel with no endpoints
        effect: { // slide effect
            transform: {
                translate: 'Y', // 'X'|'Y'|'XY'|'none'
                scale: [1, 1], // [scalefrom, scaleto]
                rotate: [0, 0] // [rotatefrom, rotateto]
            },
            opacity: [0, 1] // [opacityfrom, opacityto]
        },
        mode: 'wheel,touch', // mode of fullpage
        easing: 'ease', // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
        callback: function(index, thisPage) {
            $(document).scrollTop(0);
        }
    });

  3. 缺陷：

    • 火狐浏览器无法滑屏（可以选择其它兼容滑屏事件，禁掉插件源码滑屏方法，然后调用fullpage中prev及next方法）

适配

  1. 第三方插件pageResponse（地址：http://peunzhang.cnblogs.com ）
  2. 使用方式
    1
    2
    3
    4
    5
    6
    7
    8
    window.onload = window.onresize = function() {
         pageResponse({
             selectors: '.content1,.content2,.content3,.content4,.content5,.content6,.content7,.content8,.content9,.content10', //模块选择器，使用querySelectorAll的方法
             mode: 'contain', // auto || contain || cover ，默认模式为auto 
             width: '320', //输入页面的宽度，只支持输入数值，默认宽度为320px
             height: '480' //输入页面的高度，只支持输入数值，默认高度为504px
         });
     }

3.注意（可将背景铺满page实现背景无缝铺满，内容适配）

常见问题

  1. ios下点击延迟300ms（推荐插件hammer及fastclick）