如何使 JS 水平内容从 px 滑动到 % 响应

Question

这让我发疯：我有一个水平滑动三个 div 的小 jquery。

FIDDLE

编辑 3： Live demo; complete website showing how I want it to work.. 直到我得到小于 775 像素。请调整窗口大小以了解我的意思。

根据大众需求进行编辑。我想要的是： 在小屏幕中，例如从 700 及以下。我想要一个面板来填满屏幕。一次。

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

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

这没问题，直到我进入小屏幕。然后就乱套了： 面板垂直堆叠在一起（我想隐藏未激活的面板），并且由于固定的宽度，我在右侧“看到”了微小的压扁面板。理想情况下，我希望每个面板 100% 填充小屏幕。

我需要帮助的是：

我必须要么

1. 想办法把这个JS定义的像素滑动距离替换为%

 var margins = {
        panel1: 0,
        panel2: -200,
        panel3: -400,               
    }

..因此能够进行我的 css calc (100% - 20%) 或类似的操作。

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

非常感谢所有指针。

Answer 1

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

另请阅读：Twitter's Bootstrap mobile: more columns 和 Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

您将需要类似：

<div class="row">
<div class="col-sm-4">
<div class="panel">Panel 1</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 2</div>
</div>

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

在col-sm-4 导致的768 像素以下，您的列将堆叠（100% 屏幕宽度）。在 767 像素以上，您可以使用媒体查询为面板提供固定宽度：

@media (min-width: 768px)
{
.panel {width:200px}
}

更新（根据评论）。

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

CSS

@media (max-width: 767px)
{

#panel1 {visibility:visible}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
}

javascript

function showandhide(show)
{
    $('.panel').hide();
    $('#' + show).css('visibility','visible').slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

html

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

更新 2 基于响应。

1) 在 767 像素以上，所有面板都显示在我的示例中。当您从小到大调整大小时，您将不得不重新加载页面。 也可以使用$(window).resize() 触发此重新加载，请注意某些浏览器会触发两次，请参阅https://stackoverflow.com/a/4298653/1596547 以获取解决方案

2) 对于“侧向滑动”重写：http://jsfiddle.net/ax4AC/2/:

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });

html（新）

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-3 col-lg-3">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-6 col-lg-6">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

javascript（新）

function showandhide(show)
{
    // source: http://jsfiddle.net/ax4AC/2/

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });



  //.slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

//source timeout: https://stackoverflow.com/a/4298653/1596547
var id; 

$(window).resize(function() 
{


        clearTimeout(id);
        id = setTimeout(doneResizing, 500);



});

function doneResizing()
{


    if($(window).width()>=768)
    {
        $('.panel').css('display','block');
        $('.panel').css('visibility','visible');
        $('.panel').css('margin-left',0);
    }   

}   

css（新）

@media (max-width: 767px)
{
.panel{
    margin-left: -260px;
   }
#panel1 {visibility:visible; margin-left:0}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}


}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
    .panel {display:block; visibility:visible; margin-left:0}
}

见：http://bootply.com/73715（新！！）

Answer 2

根据我从您的问题中了解到的情况，您遇到了 panel3 的问题。您可以使用来避免这种类型的烦恼。检查live demo

.panel1, .panel2, .panel3
{
    float: left;
    height: 800px;
    padding: 5px ;
    overflow: none;
}