如何在超過div尺寸時使html文本滾動？

我有一個像數字標牌一樣的電視屏幕上顯示的html頁面。因此，頁面上的所有內容都必須在沒有任何用戶輸入的情況下顯示。我有一些存儲在mySQL數據庫中的記錄以列表格式顯示，我想要做的是當列表變大時顯示，滾動（可能一次一行），類似於滾動選框工作。如何在超過div尺寸時使html文本滾動？

我對如何做到這一點的想法最好是零散的，我希望有人能指出我正確的方向。

btw，我知道使用marquee標籤對很多開發者來說是「邪惡的」，但是在這種情況下，因爲沒有用戶輸入，我沒有看到任何其他方式。

編輯：我想到的是以某種方式獲得div高度，然後使用if語句在高度超過預定大小時觸發選取框。

編輯：這就是我這麼遠，使用JavaScript來找出DIV高度...

<script type="text/javascript"> 
function divHeight() 
{ 
    var height = document.getElementById("list").offsetHeight; 

    if (height > 500) 
    { 
    activate marquee effect. 
    return; 
    } 
    else 
    { 
    don't activate marquee effect. 
    return; 
    } 

} 
</script>

則...

<body onLoad="divHeight()"> 
<div id="list"> 
my list goes here 
</div> 
</body>

來源

2012-11-01 Andrew Fox

你是否試過通過css ...？作爲溢出：自動...？ – chhameed

我做了，但是如果文本溢出了div，那只是給出了一個滾動條。通常情況下，這很好，但是這個項目沒有用戶交互。 –

好吧，我想出了一個很好的方式來做到這一點，只需很少的代碼。如果超過尺寸，它使用JavaScript來更改div內容。我收到了要在div id="scroll"內滾動的文本，並且使用php從mySQL數據庫填充了我的數據div。下面是該腳本：

<script type="text/javascript"> 
var div = document.getElementById("scroll"); 
var height = div.offsetHeight; 
var content = div.innerHTML; 

if (height > 500) 
{ 
div.innerHTML = "<marquee direction=\"up\" scrollamount=\"2\" height=\"500px\" onfinish=\"redirect()\" loop=\"1\">" + content + "</marquee>"; 
} 

function redirect() 
{ 
refresh=window.setTimeout(function(){location.href=""},0); 
} 
</script>

由於此應用是數字標牌，我有它重定向一旦完全marquee內容已經顯示，這就是爲什麼我有onfinish="redirect"，然後一個功能重定向。

希望這會幫助別人，我知道我花了很多時間在撓撓我的頭腦。

來源

2012-11-08 12:08:30

看

此頁

http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/

他們用jcarousel lite做了。我會自己寫一個例子，但我發現這個很好的例子首先讓我不要這樣做;）

來源

2012-11-01 08:34:12

這很酷，我喜歡它的外觀。但它並沒有真正實現我之後的目標，因爲它總是滾動。在我的項目中，可能只有幾行數據適合不需要滾動，而其他時間則會有太多的數據不適合，因此需要滾動。 –

我相信你可以用一些代碼來完成自定義jcarousel行爲 –

我想我該把腳趾頭浸入jQuery！ –

如何在超過div尺寸時使html文本滾動？

回答

相關問題