我正在构建一个简单的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连接触摸事件,并添加适当的类以在幻灯片之间进行切换。