Question

我几乎是我需要的地方。我正在尝试使用jquery匹配此Flash标头here。这是我到目前为止link to sample当我尝试从右侧滑入文本时问题开始。它最终靠近文档的底部。我在不同的组合中尝试了绝对和相对定位，但它没有用。这是我的代码：

    // JavaScript Document
$(document).ready(function() {
    $("#wrap").css({
        'width':'900px',
        'margin':'0px auto', 
        'height':'150px', 
        'background':'#333',
        'overflow':'hidden'
        });
        // css for first text
    $("#text1").css({
        'position':'relative',
        'margin':'0px auto',
        'text-align':'center', 
        'color':'#fff', 
        'font-size':'140px',
        'top':'-120px', 
        'opacity':'0.5'
        });
        // animate first text
    $("#text1").animate({
        'top':'150px'           
        }, 3000, 'linear');

        // css for second text  
    $("#text2").css({
        'position':'relative',
        'margin':'0px auto',
        'text-align':'center', 
        'color':'#fff', 
        'font-size':'140px',
        'bottom':'-80px', 
        'opacity':'0.5'
        });
        // animate second text
    $("#text2").animate({
        'bottom':'330px'
        }, 3500, 'linear');

        // css for third text   
    $("#text3").css({
        'position':'relative',
        'margin':'0px auto',
        'text-align':'center', 
        'color':'#fff', 
        'font-size':'60px',
        'right':'0px', 
        });
        // animate third text
    $("#text3").animate({
        'right':'160px'         
        }, 3000, 'linear');

});

id是text3。抱歉，我无法正确格式化代码。

Answer 1

尝试给你的#wrap一个相对位置，然后你的移动文本位于绝对位置。这应该会让你减轻头痛。

Answer 2

如果没有CSS中的设置顶部，它会被其他东西推倒：

 #text3 {
    color: #FFFFFF;
    font-size: 140px;
    margin: 0 auto;
    opacity: 0.5;
    position: relative;
    text-align: center;
    top: 150px;
 }

您还希望使用位置为相对的#wrap重做此功能，因为任何左右移动都将基于窗口，因此使用px值会使其看起来与窗口大小不同。 #text3的宽度约为315像素，因此您需要将其设置为右：-315px才能开始。

无法获取动画文本显示在div内

2 个答案: