4

JSfiddleでDEMOを作ったので確認してみてください。

これは、右端から左端にスライドするコメントを示しています。
垂直方向の中央より少し上に表示されます。

どうすれば真ん中に表示できますか？
私のJSfiddleを修正して更新してください

Javascript

function transition() {

        $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>Hello! This is a test</p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);

}

setInterval(transition, 2000);

CSS

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
}

.newsticker p{
    padding-left:10px;
    padding-right:10px;
    float:left;
    position:absolute;
}

HTML

<div class="newsticker"> 
</div>
4

3 に答える 3

1

アップデート

新しいフィドル:新しい JsFiddle

HTML:

<div class="newsticker"> 
    <div class="middle"><p><p></div>
</div>

JS:

    function transition() {

        $('.middle').animate({"right":"-100%","opacity":".0"}, 600, function() {
            $('.middle').first().remove();
        });

        var width = $('.newsticker').width();
        $('.newsticker').append("<div class='middle'><p style='width: " + width + "px;'>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p></div>");
        var height = $('.middle p').last().height() / 2;
        $('.middle p').css('top','-' + height + 'px');
        $('.middle').animate({"right":"0px","opacity":"1"}, 600);
    }

setInterval(transition, 2000);

CSS:

   div.newsticker{
        border:1px solid #666666;
        width:100%;
        height:100px;
        padding: 0px;
        margin: 0px;
         overflow: hidden;
    position: relative;
    }

.newsticker p{
    padding-left:10px;
    padding-right:10px;
    line-height: 1em; 
    padding: 0px; 
    margin: 0px;
    position: relative;
    display: block;
}

.middle {position: absolute; top: 50%; padding:0; margin:0; right: -100%; opacity: 0;}

元の答え

ここに作業フィドルがあります

Jsフィドル

p タグに 100px の行の高さが必要で、and のパディングとマージンをリセットする必要がdivありましたp

 div.newsticker{
        border:1px solid #666666;
        width:100%;
        height:100px;
        padding: 0px;
        margin: 0px;
 }

    .newsticker p{
        padding-left:10px;
        padding-right:10px;
        float:left;
        position:absolute;
        line-height: 100px; 
        padding: 0px; 
        margin: 0px;
    }

また、アニメーションにいくつかの改善を加えました:

function transition() {

    $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600, function() {
         $('.newsticker p').remove();
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
    });                 
} 
setInterval(transition, 2000);

あなたはこれから始めなければなりません：

<div class="newsticker"> 
        <p><p>
 </div>
于 2013-08-26T09:56:33.313 に答える
0

フィドルを更新しました。ここで結果を確認できます

これは、それぞれ親と子に適用される css です。

//parent
position:relative;

//child
position:absolute/relative;
top:50%;
height:x;
margin-top:-x/2; // half the height

ブロックを垂直方向に中央揃えにする方法は 2 つあります。

  1. 上部の位置を 50% にし、負のマージンをブロックの高さの半分にします。これにより、垂直方向の中央に配置されます。これは、ブロックのサイズがわかっている場合にのみ役立ちます。
  2. 表示技術を使用します。親コンテナに「display:table-cell」を適用し、子コンテナには「vertical-align:middle」プロパティを使用します。これにより、サイズが変更されてもブロックが垂直方向に整列されます。
于 2013-08-26T10:08:37.003 に答える