2

いくつかのテキスト リスト項目を次々に表示する垂直ティッカーを試していますが、それらを配置するのに助けが必要です。

2 つのアイテムを含む Web ティッカーが表示されます。一度に 1 つのアイテムのみを表示するには、#tickerContainer で「overflow:hidden」を設定する必要があります。

ただし、ティッカーのテキストはティッカーの中央に配置されていません (ご覧のとおり、下部に配置されています)。

また、#tickerContainer から「overflow:hidden」を削除すると、ティッカー全体がページの上部から移動するのはどれですか?

これを修正するのを手伝ってください。 http://jsfiddle.net/nodovitt/NYhY4/2/

<div id="tickerContainer">
    <ul id="ticker" class="js-hidden">
        <li class="news-item">Item Number 1</li>
        <li class="news-item">Item Number 2</li>
    </ul>
</div>

jQuery 関数:

<script>
function tick() {
    $('#ticker li:first').slideUp(1000, function () {
        $(this).appendTo($('#ticker')).slideDown(1000);
    });
}
setInterval(function () {
    tick()
}, 2000);
</script>

CSS:

#tickerContainer {
    background-color:white;
    border-radius:15px;
    text-align:center;
    margin:10px;
    box-shadow:0 0 8px black;
    color:#2B7CD8;
    font-size:50px;
    width:500px;
    height:100px;
    overflow:hidden;

}
.news-item {
    font-family:Times New Roman;
    font-style:oblique;
}
#ticker li {
    list-style-type:none;
}
4

4 に答える 4

2

ティッカー ID に指定がありません。だから、このようなものhttp://jsfiddle.net/NYhY4/10/

#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}
于 2013-07-26T18:23:09.950 に答える
1

これがOPから要求された私の答えです

このCSSをあなたに追加してください#ticker

#ticker {
    margin: 0;
    padding: 0;
    line-height: 100px;
}

注: 行の高さは常に、行の高さでなければなりません。#tickerContainer

ここで見ることができますhttp://jsfiddle.net/NYhY4/3/

于 2013-07-26T18:25:01.020 に答える
0 
#ticker li {
    list-style-type:none;
    position: relative;
    bottom:20px;
}
于 2013-07-26T18:23:23.290 に答える
0

現在のアイテムが一見「何もない」（テキストの上のliボックスの空白部分）によって隠されているのが好きではなかったので、このアプローチを使用しました：

  1. 「#ticker」からマージンを削除します
  2. set '#ticker' padding-top (.5em が最適でした)
  3. '#ticker li' padding-bottom を設定して、次のアイテムをビューの外に押し出します (安全のために '1em' を使用しましたが、'.5em' も機能しました)

言葉は完全に中央に見えなかったので、

  1. 「#ticker li」の行の高さを「1em」に設定

    #ticker { margin: 0; padding-top: .5em; }

    #ticker li{ line-height: 1em; padding-bottom: 1em; list-style-type: none; }

http://jsfiddle.net/JvuKU/2/

注これは、「#tickerContainer」のフォント サイズに依存します。「#tickerContainer」の高さやフォント サイズを変更する場合は、「#ticker」padding-top と「#ticker li」padding-bottom の値を調整するだけです。

于 2013-07-26T19:36:42.567 に答える