HTML5 Jquery mobile中的長標題滾動

Question

我使用PhoneGap從Android編寫HTML5應用

該項目會動態加載apges，因此當標題中包含標題時，標題將被修剪以適合設備的寬度。 我已經通過在div和style =“ white-space：normal”內插入標簽來閱讀其他解決方案，但我想實現另一種效果。

我希望標題滾動到左側，就像我在標題欄中看到的一樣，例如： http : //academyoftumblr.tumblr.com/post/10896016175/typing-moving-title-bar

有沒有辦法在h1標簽中實現這種效果？ 我正在使用JqMobile btw

謝謝

Answer 1

將此添加到您的CSS可以從溢出的內容中刪除省略號。

.ui-header .ui-title {
    text-overflow: clip;
}

此功能將檢查標題是否溢出，如果是，則將其字幕。

function assessSize(){
    if($('#scrollingheader').width() < $('#textwidth').width()){
        $('#scrollingheader').marquee();
    }
}

我在這里使用的選取框函數來自此答案 。

您還需要使h1標簽的ID為“ scrollingheader”。

<div  data-role="header" ><h1 id="scrollingheader">Long Scrolling Header</h1></div>

可以改為獲取標頭div的子級h1，但為了簡單起見，我剛剛添加了ID。

這是一個JSFiddle ： http : //jsfiddle.net/fussycashew/wcuxS/494/

您可以檢查是否要為頁面調整大小上的選取框設置動畫，但是考慮到您在移動設備上，頁面實際上不應調整大小（除非改變方向）。

此外，可以根據需要對字幕動畫進行一些清理，但這應該可以幫助您入門。