jquery/css：使文本內部div水平滾動像新聞股票沒有插件

Question

任何人都有一些技巧，如何使文本內部滾動水平從右到左以「新聞股票」時尚，而無需使用插件。下面是我正在嘗試完成的一個示例（這是一個插件解決方案：http://www.maaki.com/scrollingText.html）。

Answer 1

這裏有一個快速的解決方案是： 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)); 
});​ 

使用text-indent CSS屬性，你可以做到這一點相當簡單。

Answer 2

你可以做這樣的事情

<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/

Answer 3

我最近用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; 
} 

我有a demo使用的CSS關鍵幀動畫接着變換所述內容的所有無限地從一邊到另一邊。注：供應商前綴版本未顯示。

@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 
} 

你可以看到full demo