网页前端之字幕滚动实现
生活随笔
收集整理的這篇文章主要介紹了
网页前端之字幕滚动实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基于HTML的marquee標簽實現文字滾動 / 字幕播放
marquee標簽介紹：
可以實現文字滾動方向、滾動方式、滾動速度、滾動延遲、滾動循環、滾動空間、滾動事件等。
1.direction表示滾動的方向，值可以是left，right，up，down，默認為left
2.behavior表示滾動的方式，值可以是scroll（連續滾動）slide（滑動一次）alternate（往返滾動）
3.loop表示循環的次數，值是正整數，默認為無限循環
4.scrollamount表示運動速度，值是正整數，默認為6
5.scrolldelay表示停頓時間，值是正整數，默認為0，單位似乎是毫秒
6.align表示元素的垂直對齊方式，值可以是top，middle，bottom，默認為middle
7.bgcolor表示運動區域的背景色，值是16進制的RGB顏色，默認為白色
8.height、width表示運動區域的高度和寬度，值是正整數（單位是像素）或百分數，默認width=100% height為標簽內元素的高度
9.hspace、vspace表示元素到區域邊界的水平距離和垂直距離，值是正整數，單位是像素。
10.οnmοuseοver=this.stop() οnmοuseοut=this.start()表示當鼠標以上區域的時候滾動停止，當鼠標移開的時候又繼續滾動。
具體代碼示例如下：
//滾動方向 direction <!--滾動方向 direction 4個值 up down left right 默認從右向左--> <marquee direction="up">我想上滾動</marquee> -------------------------------------------------------------------------------- //滾動方式 behavior <!--3個值 scroll-循環滾動 slide-只滾動一次 alternate-來回滾動 默認循環滾動--> <marquee behavior="slide">我只滾動一次</marquee> -------------------------------------------------------------------------------- //滾動速度 scrollamount <!--值越大，滾動速度越快 一般5-10比較適宜消息觀看--> <marquee scrollamount="5">我是速度為5的滾動</marquee> -------------------------------------------------------------------------------- //滾動延遲 scrolldelay <!--值越大，滾動速度越慢，通常不設置--> <marquee scrolldelay="90">我延遲滾動</marquee> -------------------------------------------------------------------------------- //滾動循環 loop <!-- 默認值-1或infinite 表示無限循環滾動 loop="數值" 表示滾動相應的次數--> <marquee loop="2">我是loop循環滾動</marquee> -------------------------------------------------------------------------------- //滾動背景顏色 bgcolor //寬100px 高90px 背景色為#f5f5f5的滾動區域 <marquee direction="up" width="100" height="90" bgcolor="#f5f5f5" ><p>開發工程師</p><p>設計師</p><p>前端開發</p> </marquee> -------------------------------------------------------------------------------- //滾動空間 hspace-水平邊距 vspace-垂直邊距 <marquee direction="up" width="50" hspace="20" vspace="10" ><p>開發工程師</p><p>設計師</p><p>前端開發</p> </marquee> -------------------------------------------------------------------------------- //滾動事件 //鼠標懸停，滾動停止 鼠標離開，滾動繼續 <marquee direction="up" οnmοuseοver="this.stop()" οnmοuseοut="this.start()"><p>開發工程師</p><p>設計師</p><p>前端開發</p> </marquee>此部分來自《月瘋》博客
具體代碼及示例演示如下：
<html><head><title>123</title></head><body><center><marquee behavior="scroll" direction="left" bgcolor="#43789B" loop="-1" scrollamount="30" scrolldelay="400"width=99% height="40" style="line-height: 45px">假如生活欺騙了你， 不要悲傷，不要心急！憂郁的日子里須要鎮靜：相信吧，快樂的日子將會來臨！心兒永遠向往著未來；現在卻常是憂郁。 一切都是瞬息，一切都將會過去； 而那過去了的，就會成為親切的懷戀。</marquee></center></body> </html>示例結果圖：
總結
以上是生活随笔為你收集整理的网页前端之字幕滚动实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 卓训教育：孩子不爱说话，性格内向怎么办？
- 下一篇： shell报警系统