0

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

    // 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。抱歉，我无法正确格式化代码。

4

2 回答 2

0

在 css 中没有设置顶部，它被其他东西推下：

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

您还需要使用具有 position:relative 的#wrap 来重做此操作，因为任何左右移动都将基于窗口，因此使用 px 值会使它看起来根据窗口大小而有所不同。#text3 的宽度约为 315px，因此您需要将其设置在右侧：-315px 开始。

于 2013-02-22T22:34:29.000 回答
0

尝试给你的#wrap 一个相对位置，然后你在其中的移动文本一个绝对位置。它应该会减少你的头痛。

于 2013-02-22T22:31:32.883 回答