当外部div滑动到侧时，将内部div绑定
我有一个外部div和几个内部div横向并排排列。内部div代表外部的不同部分(左、中左、中右和右)。覆盖外部div是一个“viewport”或框架，在最终产品中，它将限制可见内容仅限于帧内的内容。实际上，这个视口实际上是前面提到的“外部div”的父div，但是我已经绝对地定位了它，从而将它从页面元素流中删除。
我已经创建了一个JQuery脚本，它将外部div滑动到左侧或右侧，具体取决于单击哪个链接(左中div中的链接将向右显示div，左侧显示“隐藏”内容，左中div中的链接则相反)。
我想要的是中间div的内容被视口所限制，这样当外部div的内容向左滑动时，中左div的内容不会比视口的右边缘更远，而当外部div的内容向左滑动时，中右div的内容就不会比视图的左边缘更远。就像这样：
____________________________________________________________
| l || ml | mr || r |
| || | || |
| || | || |
| || | || |
| || | || |
| || | || |
|__________________||_________|________||__________________|
____________________________________________________________
|| l ml || mr r |
|| || |
|| || |
|| || |
|| || |
|| || |
||__________________||_____________________________________|下面是我到目前为止所做的一些事情：http://jsfiddle.net/xkjzx/2/，我唯一还没有弄明白的就是如何绑定中间div的内容。有人能给我解释一下怎么做吗？
编辑：，我想保留我的小提琴所完成的基本功能。但是，当视口溢出被隐藏时，我希望它看起来像#左侧div的内容正在滑入视图，而#mid_left div的内容正在滑过来为它腾出空间(而不是像现在那样完全从屏幕上滑动)，反之亦然。
编辑：几乎解决了它！这是新的小提琴。我有#左和中左div工作很好:我添加了第二个动画到点击事件，这改变了中间div的左边，以适应滑动。然而，同样的技术必须适应右侧:我必须在#mid_right单击事件中添加第三个动画来更改右div的边距，因为由于div的浮动性质，#mid_right div将#右div从屏幕上推开并使其呈现在下一行。不幸的是，这已经产生了副作用，将我的#mid_right div呈现在#右div后面，这样我就不能再单击将其带回链接(我给了#左和右div一个更深的背景，这样您就可以很容易地看到正在发生的事情)。我试着处理两个div的z指数，但是我认为，因为它们是浮动的，z指数不会产生任何影响。有什么想法可以反映左侧的影响在右边吗？
回答 1
Stack Overflow用户
发布于 2013-10-31 19:22:43
下面是一个小提琴和下面的代码。这只是检测当div击中veiwport窗口并停止动画。
$(document).ready(function() {
var $viewport = $("#viewport");
var slideAmount = $viewport.width() / 2;
var viewportLeft = $viewport.offset().left;
var viewportRight = $viewport.offset().left + $viewport.width();
var $slider = $("#side_scroller");
$('#mid_left a').click(function(event)
{
event.preventDefault();
collisionLoop = setInterval(collide, 1);
$slider.animate({left: $(window).width()}); // animate to right side of window
});
$('#mid_right a').click(function(event)
{
event.preventDefault();
collisionLoop = setInterval(collide, 1);
$slider.animate({left: -800});
});
function collide()
{
if($("#mid_left").offset().left + $("#mid_left").width() > viewportRight)
{
$slider.stop();
var correction = $slider.position().left -(($("#mid_left").offset().left +$("#mid_left").width()) - viewportRight);
$slider.css({left:correction});
clearInterval(collisionLoop);
}
else if($("#mid_right").offset().left < viewportLeft)
{
$slider.stop();
var correction = $slider.position().left +(viewportLeft - ($("#mid_right").offset().left));
$slider.css({left:correction});
clearInterval(collisionLoop);
}
}
});https://stackoverflow.com/questions/19714105
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号