如何使JS水平内容从px滑动到％响应
这让我很生气：我有一点点jquery水平滑动三个div。
小提琴
编辑3： 现场演示; 完整的网站显示我希望它如何工作 .. 直到我达到低于775px。 请调整窗口大小以查看我的意思。
编辑，受欢迎的需求。 我想要的是：在小屏幕上，比如700以下。 我想要一个面板填满屏幕。 一次。
2ND编辑： 在700px以上工作正常。 在那之下; 我希望屏幕一次只显示一个面板，当需要时（点击当前面板），下一个面板将向侧面滑动。 即没有堆叠列，这是经典的响应式设计。 请看小提琴。 在您最小化浏览器窗口或使用移动设备之前，这一切都很好。
我将panel1和panel2定义为fixed width ，并使用css calc将第三个面板保持为100％减去panel1（200px）和panel2（200px）:( (calc 100% - 400px)
这很好用，直到我进入小屏幕。 然后它变得混乱：面板垂直堆叠在一起（我想隐藏面板不活动），并且由于固定的宽度，我“看到”右边的一小块压扁面板。 理想情况下，我希望每个面板100％填充小屏幕。
我需要帮助的是：
我必须要么
- 找到一种方法来替换这个JS定义的像素滑动距离％
var margins = { panel1: 0, panel2: -200, panel3: -400, }
..因此能够做我的css计算（100％ – 20％）或类似的东西。
- ..或者，至少，在小屏幕中找到隐藏面板的方法。
所有指针都非常感谢。
您可以在此处阅读有关TB3网格的更多信息： http ： //getbootstrap.com/css/#grid
另请阅读： Twitter的Bootstrap mobile：更多列和Twitter的Bootstrap 3网格，更改断点并删除填充
你需要这样的东西：
Panel 1 Panel 2 Panel 3
在768像素以下，您的列将堆叠（100％屏幕宽度），由col-sm-4 。 在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
Panel 1 Panel 2 Panel 3
根据响应更新2 。
1）在767像素上方，所有面板都显示在我的示例中。 当您从小到大resize时，您将不得不重新加载页面。 也可以使用$(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（新）
Panel 1 Panel 2 Panel 3
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 （新!!）
从我对你的问题的理解，你遇到了panel3的问题。 你可以用来避免这种烦恼。检查现场演示
.panel1, .panel2, .panel3 { float: left; height: 800px; padding: 5px ; overflow: none; }