![bootply]( "bootply")
本文介绍了如何使 JS 水平内容从 px 滑动到 % 响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这让我很生气:我有一个 jquery，它可以水平滑动三个 div.
小提琴
编辑 3:现场演示；显示我希望它如何工作的完整网站...直到我的像素小于 775px.请调整窗口大小以了解我的意思.
编辑，应大众需求.我想要的是:在小屏幕中，比如 700 及以下.我想要一个面板来填满屏幕.一次.
第二次在 700 像素以上时效果很好.在此之下；我希望屏幕一次只显示一个面板，并且在需要时(单击当前面板)，下一个面板将侧向滑动.IE.没有堆叠的列，这是经典的响应式设计.请参阅小提琴.在您最小化浏览器窗口或使用移动设备之前，一切都很好.
我将 panel1 和 panel2 定义为 fixed width，并使用 css calc 将第三个面板保持在 100% 减去 panel1 (200px) 和 panel2 (200px): (calc 100%- 400px)
这没问题，直到我进入小屏幕.然后就乱了:面板垂直堆叠在一起(我想隐藏不活动的面板)，并且由于固定的宽度，我看到"了右侧被压扁的小块面板.理想情况下，我希望每个面板都能 100% 填满小屏幕.
我需要帮助的是:
我必须要么
- 找到一种方法来替换像素滑动距离到 % 的 JS 定义
var margins = {面板 1: 0,面板 2:-200，面板 3:-400，}
..因此能够做我的 css calc (100% - 20%) 或类似的事情.
- ..或者，至少，找到一种在小屏幕中隐藏面板的方法.
非常感谢所有的指针.
解决方案
您可以在此处阅读有关 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>
<div class="col-sm-4 col-lg-4"><div id="panel2" class="panel">面板 2</div>
<div class="col-sm-4 col-lg-4"><div id="panel3" class="panel">面板 3</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,不透明度:显示"});
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-3 col-lg-3"><div id="panel1" class="panel">面板 1</div>
<div class="col-sm-3 col-lg-3"><div id="panel2" class="panel">面板 2</div>
<div class="col-sm-6 col-lg-6"><div id="panel3" class="panel">面板 3</div>
javascript(新)
函数showandhide(show){//来源: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,不透明度:显示"});//.slideDown("慢");}$('.panellink').click(function(){showandhide($(this).attr('rel'))返回假；});//源超时:https://stackoverflow.com/a/4298653/1596547变量标识；$(window).resize(function(){清除超时(ID)；id = setTimeout(doneResizing, 500);});函数 doneResizing(){if($(window).width()>=768){$('.panel').css('display','block');$('.panel').css('visibility','visible');$('.panel').css('margin-left',0);}}
css(新)
@media (最大宽度:767px){.控制板{左边距:-260px；}#panel1 {可见性:可见；左边距:0}#panel2 {可见性:隐藏}#panel3 {可见性:隐藏}}@media(最小宽度:768px){#menu {可见性:隐藏}.面板{显示:块；可见性:可见；左边距:0}}
参见:http://bootply.com/73715(新！！)
This is driving me mad: I have a small bit jquery who slides three divs horizontally.
FIDDLE
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.
EDIT, by popular demand. What I want:In small screens, say from 700 and down. I want one panel to fill the screen. At a time.
2ND edit:It works fine at above 700px. Below that; I would want the screen to show only one panel at a time, and when desired (a click on the current panel), the next panel will slide in sideways. I.e. No stacked columns, which is the classic responsive design. Please see Fiddle. It is all good until you minimize the browser window or use a mobile device.
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)
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%.
What I need help with is this:
I must either
- find a way to replace this JS defintion of the slide distance of pixels to %
var margins = {
panel1: 0,
panel2: -200,
panel3: -400,
}
..and therefore be able to do my css calc (100% - 20%) or something like that.
- ..or, at the very least, find a way to hide panels when in small screens.
All pointers greatly appreciated.
解决方案
You can read more about the TB3 grid here: http://getbootstrap.com/css/#grid
Also read: Twitter's Bootstrap mobile: more columns and Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
Update 2 based on the response.
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 https://stackoverflow.com/a/4298653/1596547 for a solution
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 (new)
<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 (new)
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 (new)
@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 (new!!)
这篇关于如何使 JS 水平内容从 px 滑动到 % 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-30 20:21