如何使JS水平内容幻灯片从px到％响应 [英] How to make a JS horizontal content slide from px to % responsive
问题描述
这让我疯狂：我有一个小jQuery，水平滑动三个div。
This is driving me mad: I have a small bit jquery who slides three divs horizontally.
编辑3：
Live demo;完整的网站显示如何我希望它工作 .. 直到我达到小于775px。请调整窗口大小以查看我的意思。
Edit 3: Live demo; complete website showing how I want it to work.. until I get to less than 775px. Please resize window to see what I mean.
按广受欢迎的需求编辑。我想要的：
在小屏幕，说从700和下来。我想要一个面板填充屏幕。
2ND编辑：
在700像素以上可以正常工作。下面我想让屏幕一次只显示一个面板，并且当需要时（点击当前面板），下一个面板将侧向滑动。也就是说没有堆积的列，这是经典的响应式设计。请参阅小提琴。
我将panel1和panel2定义为 fixed width ，并使用css calc将第三个面板保持在100％减panel1（200像素）和panel2（200像素）：（calc 100％ - 400px）
I define panel1 and panel2 as fixed width, and use a css calc to keep the third panel at 100% minus panel1 (200px) and panel2 (200px): (calc 100% - 400px)
这个工作正常，直到我进入小屏幕。然后它去haywire：
面板堆叠在彼此的垂直（我想隐藏面板不活动），并且因为固定的宽度我看到小块的压扁板的右边。理想情况下，我希望每个面板都填充100％的小屏幕。
This works ok, until I get down into small screens. Then it goes haywire: The panels stack on top of each other vertically (I want to hide the panels not active), and because of the fixed widths I "see" tiny bits of squished panels to the right. Ideally, I want each panel to fill small screens 100%.
我需要的帮助是：
我必须
- 找到一种方法来替换这个JS定义的像素滑动距离％
var margins = {
panel1: 0,
panel2: -200,
panel3: -400,
}
。 。因此能够做我的css calc（100％ - 20％）或类似的东西。
..and therefore be able to do my css calc (100% - 20%) or something like that.
- ..最小的，找到一种方法来隐藏面板时在小屏幕。
所有指针都非常感激。
推荐答案
您可以在此处详细了解TB3网格： http://getbootstrap.com/css/#grid
You can read more about the TB3 grid here: http://getbootstrap.com/css/#grid
另请阅读： Twitter的Bootstrap mobile：更多列和 Twitter的Bootstrap 3网格，更改断点和删除填充
您将需要类似：
You will need something like:
<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>
在768像素下方，您的列将堆叠（100％屏幕宽度），由 col-sm-4 。在767像素以上，您可以使用媒体查询为您的面板提供固定宽度：
Below the 768 pixels your columns will stack (100% screen-width) caused by the col-sm-4. Above the 767 pixels you can use a media query to give your panels a fixed width:
@media (min-width: 768px)
{
.panel {width:200px}
}
update (based on the comment) below.
请尝试以下操作： 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 b
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>
Update 2 。
1）高于767像素，所有面板都显示在我的示例中。当您从小到大调整大小时，您将必须重新加载页面。
也可以用 $（window）.resize（）触发这个重载，注意一些浏览器会触发这两次，参见http://stackoverflow.com/a/4298653/1596547 解决方案
1) above the 767 pixels, all panel are shown in my example. You will have to reload the page when you resize from small to big.
To could also trigger this reload with $(window).resize() note some browser will fire this twice, see http://stackoverflow.com/a/4298653/1596547 for a solution
2）for滑动在侧面重写这： http://jsfiddle.net/ax4AC/2/ ：
2) for "sliding in sideways" rewrite this: 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: http://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);
}
}
@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}
}
see： http://bootply.com/73715 （新！）
这篇关于如何使JS水平内容幻灯片从px到％响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
