Question

我在FullPage.js库中发现了great example的分屏功能。这是demo。

在这里，我制作了jsFiddle demo，但有一个例外，它不是全屏显示。

#splitscreen > .section .column-left {
  float: left;
  width: 50%;
  color: #000;
  background: #fff;
}

#splitscreen > .section .column-right {
  float: right;
  width: 50%;
  color: #fff;
  background: #000;
}

#splitscreen > .section .column-left {
  transition: all 1s ease 0s;
  transform: translateY(100%);
  backface-visibility: hidden;
}

#splitscreen > .section .column-right {
  transition: all 1s ease 0s;
  transform: translateY(-100%);
  backface-visibility: hidden;
}

#splitscreen > .section.active {
  z-index: 1;
}

#splitscreen > .section.active .column-left {
  transform: translateY(0);
}

#splitscreen > .section.active .column-right {
  transform: translateY(0);
}

#splitscreen > .section.active ~ .section .column-left {
  transform: translateY(-100%);
}

#splitscreen > .section.active ~ .section .column-right {
  transform: translateY(100%);
}

/* prevent fullpage from translating the page */
#splitscreen {
  transform: translate3d(0px, 0px, 0px) !important;
}

#splitscreen > .section {
  position: absolute;
  top: 0;
  left: 0;
}

但是问题是如何修改原始代码，以使FullPage.js在默认幻灯片状态下工作？换句话说，一旦检测到移动设备（媒体查询），就将FullPage.js强制为一页样式。

UPD ：一旦检测到移动设备，我已经添加了此JS和CSS来破坏FullPage配置。但是它完全可以在CSS上工作。如何以一页样式在移动设备上重新启动它？

JS

$(document).ready(function () {

    'use strict';

    var fullPageCreated = false;
    createFullpage();

    function createFullpage() {
        if (fullPageCreated === false) {
            fullPageCreated = true;
            $('#splitscreen').fullpage({
                scrollingSpeed: 1000,
                responsiveWidth: 740,
                verticalCentered: false,
                anchors: [''],
                navigation: true,
                navigationPosition: 'left',
                css3: true,
                scrollingSpeed: 800,
                autoScrolling: true,
                fitToSection: true,
                fitToSectionDelay: 1000,
                scrollBar: false,
                easing: 'easeInOutCubic',
                easingcss3: 'ease',

                keyboardScrolling: true,
                animateAnchor: true,
                recordHistory: true
            });
        }
    }

function createFullpageMob() 
   {         

        $('#splitscreen').fullpage({
            scrollingSpeed: 100000, /*for debug purpose*/
            responsiveWidth: 500,
            verticalCentered: false,
            anchors: [''],
            navigation: false,                
            css3: true,
            scrollingSpeed: 10800, /*for debug purpose*/
            autoScrolling: true,
            fitToSection: true,
            fitToSectionDelay: 1000,
            scrollBar: true,
            easing: 'easeInOutCubic',
            easingcss3: 'ease',

            keyboardScrolling: true,
            animateAnchor: true,
            recordHistory: true
        });

}  

    if (document.documentElement.clientWidth < 400) {
        $.fn.fullpage.destroy('all');
    }

    $(window).resize(function () {
        if ($(window).width() > 400) {
            createFullpage();
        } else {
            if (fullPageCreated == true) {
                fullPageCreated = false;
                $.fn.fullpage.destroy('all');
                createFullpageMob();/*seems that it's initizlized, but doesn't work*/
            }
        }

    });


});

CSS

@media only screen and (max-width : 420px) {

    #splitscreen > .section .column-left {

        width: 100%;
    }

    #splitscreen > .section .column-right {

        width: 100%;
    }
}

FullPage.JS分屏显示。在移动设备上使其成为一页样式

0 个答案: