Js實現文字水平滾動

2021-10-01 16:04:25 字數 1530 閱讀 3156

公司專案中有乙個公告欄,寫的時候我先想到了用marquee,於是發現了marquee有很多弊端,當文字全部顯示完才出現新的文字,這樣不是很友好,然後一查發現marquee這個標籤已經被w3c標準廢棄了,也就是不再支援使用這個標籤了,於是我便用js+css去替代這個寫法,並且做到類似無縫滾動的效果。直接上**:

html**:

"scroll_div"

class

="fl"

>

"scroll_begin"

>

class

="pad_right"

>

這是第一條資訊的內容這是第一條資訊的內容這是第一條資訊的內容span

>

class

="pad_right"

>

這是第二條資訊的內容這是第二條資訊的內容這是第二條資訊的內容span

>

class

="pad_right"

>

這是第三條資訊的內容這是第三條資訊的內容這是第三條資訊的內容span

>

class

="pad_right"

>

這是第四條資訊的內容這是第四條資訊的內容這是第四條資訊的內容span

>

class

="pad_right"

>

這是第五條資訊的內容這是第五條資訊的內容這是第五條資訊的內容span

>

div>

"scroll_end"

>

div>

div>

css**:

#scroll_div

#scroll_begin,#scroll_end

.pad_right

js**:

//文字橫向滾動

function

scrollimgleft()

mymar=

setinterval

(marquee,speed)

;//給上面的方法設定時間 setinterval

//滑鼠滑入這條公告欄的時候,清除上面的方法,讓公告欄暫停

scroll_div.

onmouseover

=function()

//滑鼠滑出這條公告欄的時候,公告欄繼續移動

scroll_div.

onmouseout

=function()

}scrollimgleft()

;

效果截圖:

文字垂直水平迴圈滾動

父元素包裹時屬性 overflow hidden 水平 父元素設定了定位,子元素固定寬度,並且轉殖子元素left父元素寬度 demo demo1 li scroll sp scroll sp div scroll sp div li scroll sp div2 align center id de...

IOS實現文字水平無間斷滾動

ios跑馬燈效果,實現文字水平無間斷滾動,示例 如下 viewcontroller.h import inte ce viewcontroller uiviewcontroller property nonatomic strong nsarray arrdata end viewcontrolle...

Windows Phone 7 水平滾動的文字

有木有發現應用的標題長一點就顯示不全鳥,滾動一下就可以了。有兩種方法一種是使用scrollviewer控制項,另外一種是使用translatetransform平移變換來實現。一 scrollviewer控制項直接設定horizontalscrollbarvisibility auto 就可以水平滾...