1. 首頁
  2. 問答
  3. 在網頁上循環移動文本

在網頁上循環移動文本

2012-10-30 49 views
7

我在設計網頁，我需要將文本從顯示器屏幕左側移動到屏幕右側。我試過用<marquee>標籤。它工作沒有任何錯誤。在網頁上循環移動文本

我的要求是當文本即將消失在網頁的右側時，它應該從頁面的左側開始出現。它不應該等待所有文本消失，然後從左側開始。

直到現在我一直在使用<html>。請建議其他方式。

來源

2012-10-30 Prathamesh

+0

@是否投票表示接近。你能解釋爲什麼你認爲這不是一個真正的問題，所以OP可以改進它。 –

+0

不知道是誰關了，但是''是非標準標籤。它由W3C棄用，並且不建議它們用於任何HTML文檔。 – Andy

+2

可能重複的[Javascript字幕替換標籤]（http://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags） – Alohci

回答

3

它使用Javascript是可能的：

使文本的兩個副本由所述容器的寬度被滾動分離。從（左側複製可見）到（右側複製可見）製作動畫，然後跳回並重復。

沿東西線（未經測試，使用jQuery）：

<div class="outer"> 
    <div class="inner"> 
    some text 
    </div> 
</div>

CSS：

.outer, .inner { 
    width: 100%; 
} 
.outer { 
    position: relative; 
    overflow: hidden; 
} 
.inner { 
    position: absolute; 
}

JS：

(function rerun(){ 
    var time = 10000 //ms 

    $(".inner").slice(0,-1).remove() 
    $i1=$(".inner") 
    $i2=$i1.clone() 

    $i1.css({left:0}).animate({left:"-100%"}, time) 
    $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun) 
})()

這樣的文字應該開始出現在右側一旦開始消失在右側。修改相對寬度以實現不同的效果。

來源

2012-10-30 15:36:13

+0

這個東西飛行的方式太快了，頁面的滾動條也在不斷地瘋狂使用它=/ – Maslow

+0

@Maslow滾動條用'overflow：hidden'固定;可以確定的是，600毫秒的默認滾動時間也有點太短。感謝您的注意 –

相關問題

 相關問題