如何使 JS 水平内容从 px 滑动到 % 响应 [英] How to make a JS horizontal content slide from px to % responsive

问题描述

这让我很生气:我有一个 jquery，它可以水平滑动三个 div.

小提琴

编辑 3:现场演示；显示我希望它如何工作的完整网站...直到我的像素小于 775px.请调整窗口大小以了解我的意思.

编辑，应大众需求.我想要的是:在小屏幕中，比如 700 及以下.我想要一个面板来填满屏幕.一次.

第二次在 700 像素以上时效果很好.在此之下；我希望屏幕一次只显示一个面板，并且在需要时(单击当前面板)，下一个面板将侧向滑动.IE.没有堆叠的列，这是经典的响应式设计.请参阅小提琴.在您最小化浏览器窗口或使用移动设备之前，一切都很好.

我将 panel1 和 panel2 定义为 fixed width，并使用 css calc 将第三个面板保持在 100% 减去 panel1 (200px) 和 panel2 (200px): (calc 100%- 400px)

这没问题，直到我进入小屏幕.然后就乱了:面板垂直堆叠在一起(我想隐藏不活动的面板)，并且由于固定的宽度，我看到"了右侧被压扁的小块面板.理想情况下，我希望每个面板都能 100% 填满小屏幕.

我需要帮助的是:

我必须要么

1. 找到一种方法来替换像素滑动距离到 % 的 JS 定义

 var margins = {面板 1: 0,面板 2:-200，面板 3:-400，}

..因此能够做我的 css calc (100% - 20%) 或类似的事情.

1. ..或者，至少，找到一种在小屏幕中隐藏面板的方法.

非常感谢所有的指针.

解决方案

您可以在此处阅读有关 TB3 网格的更多信息:http://getbootstrap.com/css/#grid

另请阅读:Twitter 的 Bootstrap 移动版:更多专栏和Twitter 的 Bootstrap 3 网格，更改断点和删除填充

<打击>您将需要类似的东西:

<div class="col-sm-4"><div class="panel">面板 1</div>
<div class="col-sm-4"><div class="panel">面板 2</div>

<div class="col-sm-4"><div class="panel">面板 3</div>

由 col-sm-4 引起的低于 768 像素的列将堆叠(100% 屏幕宽度).在 767 像素以上，您可以使用媒体查询为面板设置固定宽度:

@media(最小宽度:768px){.panel {宽度:200px}}

更新(根据评论)如下.

试试这个:http://bootply.com/73541

CSS

@media (最大宽度:767px){#panel1 {可见性:可见}#panel2 {可见性:隐藏}#panel3 {可见性:隐藏}}@media(最小宽度:768px){#menu {可见性:隐藏}}

javascript

函数showandhide(show){$('.panel').hide();$('#' + show).css('visibility','visible').slideDown("slow");}$('.panellink').click(function(){showandhide($(this).attr('rel'))返回假；});

html

<div class="col-12"><a class="panellink" rel="panel1" href="">面板 1</a>|<a class="panellink" rel="panel2" href="">面板 2</a>|<a class="panellink" rel="panel3" href="">面板 3</a>

<div class="容器"><div class="row"><div class="col-sm-4 col-lg-4"><div id="panel1" class="panel">面板 1</div>