Question

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

移动时（比方说，宽达800px），我希望这些列遍布屏幕的整个宽度。它们不应出现在彼此之下，但仍然彼此相邻，非活动列的宽度为0px，使得1列显示为“全屏”。这样，当另一列成为活动列时，我可以创建左/右滑动效果。

我现在正在使用Javascript做这一切，没有问题，但我觉得我可以以更优化的方式做到这一点。我也在使用Bootstrap，所以我觉得这应该可以帮助我解决这个问题。

有没有什么方法可以实现这个结果（在屏幕上有一列滑动动画＆lt; 800px，在大屏幕上有3列），尽可能少的JS？

我希望能够仅将JS用于动画和CSS以用于所有其他动画，但目前我正在使用它来调整屏幕大小调整列的大小，进行动画制作，几乎所有的工作。< / p>

更新：我尽力在简单的 JSFiddle 中解决当前的情况。我的目的是让列在较小的屏幕上显示为全屏，并自动显示为宽于（f.e.）800px的屏幕上的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);
    });
}

Answer 1

您可以使用nth-child选择器

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

用于较小的设备

.slide {
  width: 0;
}

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

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

使用javascript＆amp; amp;来连接触摸事件添加适当的类以在幻灯片之间切换。

使用Bootstrap响应3列布局

1 个答案: