8

プラグインを使用せずに、「ニュースティッカー」のように div 内のテキストを右から左に水平にスクロールする方法について、誰もがいくつかのヒントを持っています。これはまさに私が達成しようとしていることの例です (これはプラグイン ソリューションです: http://www.maaki.com/scrollingText.html )。

4

4 に答える 4

11

これに対する簡単な解決策は次のとおりです：http： //jsfiddle.net/4mTMw/8/

var marquee = $('div.marquee');
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});​

cssプロパティを使用すると、text-indentこれをかなり簡単に行うことができます。

于 2012-09-29T23:08:38.873 に答える
10

私は最近、CSS キーフレーム アニメーションでこれを解決しました。

基本的に、ティッカーには、オーバーフローが隠されているラッパー div が必要です。アイテムに含まれるティッカーは、インライン ブロックを表示して、一列に並べる必要があります。

<div class="ticker-wrap">
    <div class="ticker">
        <div class="ticker__item">Letterpress chambray brunch.</div>
        <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
        <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
    </div>
</div>

CSS の例:

.ticker-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: rgba(51, 51, 51, 0.5);
    padding-left: 100%; // offsets items to begin
}

.ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    padding-right: 100%; // taken from container as display inline-block
}

.ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: white;
}

css キーフレーム アニメーションを使用して、コンテンツを片側から反対側に無限に変換するデモがあります。nb ベンダー接頭辞付きのバージョンは表示されていません。

@keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);

    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

必要な微調整は、アニメーションの長さを設定して .ticker に適用することだけです。

.ticker {
    animation-name: ticker;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 25s; // tweak based on number of items/desired speed
}

完全なデモを見ることができます

于 2015-05-17T20:43:27.037 に答える
-1

あなたはこのようなことをすることができます

<div id="scrollcontainer" style="postion:relative; overflow:hidden; width:100%;">
  <span id="scrolltext" style="position:absolute; white-space:nowrap">this is the scrolling text</span>
</div>

およびjs関数

function scroll() {
  $('#scrolltext').css('left', $('#scrollcontainer').width());
  $('#scrolltext').animate({
    left: '-='+($('#scrollcontainer').width()+$('#scrolltext').width())
  }, 2000, function() {
    scroll();
  });
}

scroll();

テスト済み。ここで見つけることができます：http://jsfiddle.net/zrW5q/85/

于 2012-09-29T22:52:50.150 に答える