Question

有没有人知道jquery插件或css3技术另一种移动文本元素的简单方法，比如从div的顶部到底部的div内部10 h1？

所以

<div class="container">
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
...
</div>

我想让h1连续滑动，并且div区域充满了h1的向下滑动，就像电影积分一样。

我尝试了jquery循环插件，但是我不能在第一张幻灯片（h1）完成第一张幻灯片之前启动它。

以下是代码：

$('.container').cycle({ 
    fx:      'scrollDown', 
    sync: 1, 
    timeout: 1000,
    speed: 6000,
    continuous: 1,
    cleartypeNoBg: true 
});

也试过这样的事情：

$('.container').cycle({ 
    fx:      'custom', 
    sync: 1, 
    cssBefore: {  
    top:  0, 
    display: 'block' 
    }, 
    animIn:  { 
        top: 0 
    }, 
    animOut: {  
        top: 332 
    }, 
    cssAfter: {   
        display: 'none' 
    }, 
    delay: -1000  
    });
});

Answer 1

这应该做你想要的......

HTML

<div id="container">
    <div id="fancy_h1_wrap">
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
    </div>
</div>

jquery的

function fun(){
    $('#fancy_h1_wrap').css('top', '');
    $('#fancy_h1_wrap').animate({top:"-100%"}, 5000, fun);

}

fun();

CSS

#container 
{
    overflow:hidden;

}

#fancy_h1_wrap
{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:100%;
}

WORKING JS FIDDLE

jquery移动文本像电影信用

1 个答案: