電影結束效果的實現

  經常我們看電影都會看到電影結束後會出現一段介紹這個電影的導演、編劇、主演、友情出演等等一些電影信息的滾動字幕，那麼那個效果可以用html+css+div實現。具體實現代碼如下：

html代碼：

<div id="movie">
  <div id="movieup"></div>

   <marquee direction="up" height=400px;>
     <p>導演：***</p>
     <p>編劇：***</p>
     <p>主演：**** ** *** </p>
     <p>友情出演：*** *** **</p>
   </marquee>

  <div id="moviedown"></div>
</div>

　　滾動標簽：<marquee>要滾動的文字/圖像<img src=””>  </marquee>

下麵是我對滾動標簽中的一些常見屬性的羅列：

滾動方向 direction=up/down/left/right （向上/向下/向左/向右）

滾動速度 scrollamount=4/5/6 （4/5/6是比較適合大家使用的三個滾動速度）

滾動行為 behavior=scroll/slide/alternate（迴圈滾動/只滾動一次/來回滾動）

滾動次數 loop=3(迴圈三次)

滾動延時 scrolldelay=1000(1000毫秒即一秒)

限制滾動區域大小width=”” height=""  bgcolor=""（用來顯示出可以滾動的區域）

停止與滾動效果Onmouseover=this.stop() Onmouseout=this.start()

(滑鼠放上面滾動效果停止，滑鼠離開滾動繼續)

註：以上都可作為<marquee></marquee>標簽對里的開始標簽里的屬性添加想要的效果

css:

 #movie
  {
    width:360px;
    height:400px;
    background:url("F:\images\1.jpg");
    border:1px solid #000000;
    text-align:center;
    margin:auto;
    position:relative;
  }
  #movieup
  {
    width:100%;
    height:40px;
    background:#000000;
    position:absolute;
    top:0px;
  
  }
  #moviedown
  {
     width:100%;
     height:40px;
     background:#000000;
     position:absolute;
     bottom:0px;
  }

   我本來把滾動效果錄成微視頻準備給大家看看的，但不知道是沒這功能還是有點新手上路沒找到在哪裡上傳本地視頻，只能暫時先上傳靜態照片了，知道它是向上滾動的字幕即可，這隻是滾動標簽的一個簡單應用，看到該篇隨筆的園友們可以增添更多樣式使它更加豐富多彩。