将溢出的内容传输到另一个div - jquery

时间:2014-01-30 15:48:05

标签: jquery overflow

关于堆栈溢出的第一个问题,虽然我已经使用了多年。

我正在尝试将溢出的内容从一张幻灯片移动到下一张幻灯片(两者都是div),这些内容放在一个水平的滚动div中。我已经成功开始了 - 请使用以下代码查看JS小提琴电子邮件http://jsfiddle.net/N7X6W/3/

count = 0;
$('.slide > .textOnly > .textAlign').each(function() {
var nextSlide = count + 1;
$(this).children('p').each(function() {
    var currentEl = $(this);
    if($(this).is(':in-viewport')) {
        // Do Nothing
    } else {
        $('.slide' + nextSlide + ' > .textOnly > .textAlign').prepend($(this));
    }
});
count++;
});

现在唯一的问题是内容正在移动到最后一张幻灯片。我假设是因为它正在考虑左右。

我正在使用此插件http://www.appelsiini.net/download/jquery.viewport.js并试图取消左右计算,但没有效果。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

就目前而言,如果屏幕上只有一张幻灯片,则所有第二个屏幕的段落都会在第三个屏幕上显示。这似乎不适合任何目的。如果我理解你的意图,那么你真正关心的是:低于折叠(不是!:视口内)。这很重要,因为它可以防止您重新定位相同的项目(根据定义在视口之外),除非,因为它们也在该幻灯片的下方。

一旦我开始工作,就会有一些细节。段落仍将在中间被切断。问题不只是“是P:低于折叠?”,因为如果第一行在视口中,那么不,P不在下面。我想知道的是整个事物是否在视口中,因为我知道高度/宽度约束实际上是“视口中段落的最后一个字母”。由于最后一个字母不是一个平滑的可定位元素,我只是继续在段落的末尾创建一个空的跨度。然后我问是否低于折扣,这告诉我段落是否被切断。

count = 0;
$('.slide > .textOnly > .textAlign > p').append("<span class='trailer'></span>");
$('.slide > .textOnly > .textAlign').each(function() {
    var nextSlide = $('.slide' + (++count) + ' > .textOnly > .textAlign');
    $($(this).children('p').filter(function() {
        return $(".trailer", this).is(':below-the-fold')
    }).get().reverse())    
      .each(function() { nextSlide.prepend($(this)); });
});

有效载荷: http://jsfiddle.net/zatz/N7X6W/6/

注意:通过迭代P元素和前置,你改变了他们的顺序!请参阅.reverse()的使用。