我正在构建一个简单的网络界面,其中包含 3 个横向列。
当移动时(比方说,最大 800 像素宽),我希望这些列分布在屏幕的整个宽度上。 它们不应出现在彼此下方,但仍会彼此相邻,非事件列的宽度为 0px,使 1 列显示为“全屏”。这样,当另一列变为事件列时,我可以创建向左/向右滑动的效果。
我现在使用 Javascript 来完成这一切,没问题,但我觉得我可以用更优化的方式来完成这件事。我也在使用 Bootstrap,所以我觉得这应该可以帮助我解决这个问题。
有什么方法可以用尽可能少的 JS 实现这个结果(1 列在 < 800 像素的屏幕上有滑动动画,3 列在更大的屏幕上)?
我希望能够仅将 JS 用于动画,将 CSS 用于所有其余部分,但目前我正在使用它来调整屏幕大小的列大小,制作动画,几乎所有的工作。
更新:我尽我最大的努力在一个简单的 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 连接触摸事件并添加适当的类以在幻灯片之间切换。
关于javascript - 使用 Bootstrap 的响应式 3 列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24737496/