我正在构建一个简单的Web界面,该界面由3个侧面列组成。

在移动设备上(例如,最大宽度为800像素),我希望这些列分布在屏幕的整个宽度上。
它们不应出现在彼此下方,而应彼此相邻,不活动列的宽度为0px,使1列显示为“全屏”。这样,当另一列成为活动列时,我可以创建左右滑动效果。

我现在使用Javascript进行所有操作,没有问题,但是我觉得我可以以更优化的方式进行操作。我也正在使用Bootstrap,所以我觉得这应该可以帮助解决这个问题。

有什么办法可以用尽可能少的JS来实现此结果(在
我很希望能够只将JS用于动画,而将CSS用于所有其余部分,但是目前,我正在使用JS来调整屏幕调整大小上的列大小,执行动画以及几乎所有工作。

更新:我已尽力通过简单的JSFiddle解决当前情况。我的目的是使列在较小的屏幕上以全屏显示,并在宽于(例如)800像素的屏幕上以3列的布局自动显示。

当屏幕不够宽时,这是在各列中滑动的Javascript:

//Go back, "slide" to the left
function slideBack() {
    var previous = currentView;
    currentView = views[views.indexOf(currentView) - 1];

    $("#" + previous).animate({
        width: 0
    }, 300, function () {
        $("#" + previous).hide();
    });
    $("#" + currentView).show(function () {
        $("#" + currentView).animate({
            width: $(window).width()
        }, 300);
    });
}

//Go forward, "slide" to the right
function slideForward() {
    var previous = currentView;
    currentView = views[views.indexOf(currentView) + 1];

    $("#" + previous).animate({
        width: 0
    }, 300, function () {
        $("#" + previous).hide();
    });
    $("#" + currentView).show(function () {
        $("#" + currentView).animate({
            width: $(window).width()
        }, 300);
    });
}

最佳答案

好吧,您可以使用nth-child选择器

<div class="slide col-xs-12"></div>
<div class="slide col-xs-12"></div>
<div class="slide col-xs-12"></div>


适用于较小设备的CSS

.slide {
  width: 0;
}

.slide:nth-child(1) {
  width: 100%;
}


在上述情况下,第一张幻灯片的宽度为100%,而其余的幻灯片则没有宽度。您也可以使用display:none而不是零宽度。

使用javascript连接触摸事件,并添加适当的类以在幻灯片之间进行切换。

09-25 16:55
查看更多