AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > css教程

html+css+div实现电影结束效果

51自学网 http://www.51zixue.net
html,css,div,电影,结束

经常我们看电影都会看到电影结束后会出现一段介绍这个电影的导演、编剧、主演、友情出演等等一些电影信息的滚动字幕,那么那个效果可以用html+css+div实现。具体实现代码如下:

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div id="movie">  
  2.   
  3.   <div id="movieup"></div><br>  
  4.   
  5.    <marquee direction="up" height=400px;>  
  6.   
  7.      <p>导演:***</p>  
  8.   
  9.      <p>编剧:***</p>  
  10.   
  11.      <p>主演:**** ** *** </p>  
  12.   
  13.      <p>友情出演:*** *** **</p><br>   </marquee><br>  
  14.   
  15.   <div id="moviedown"></div><br></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:

CSS Code复制内容到剪贴板
  1. #movie  
  2.   
  3.  {  
  4.   
  5.    width:360px;  
  6.   
  7.    height:400px;  
  8.   
  9.    background:url("F:/images/1.jpg");  
  10.   
  11.    border:1px solid #000000;  
  12.   
  13.    text-align:center;  
  14.   
  15.    margin:auto;  
  16.   
  17.    position:relative;  
  18.   
  19.  }  
  20.   
  21.  #movieup  
  22.   
  23.  {  
  24.   
  25.    width:100%;  
  26.   
  27.    height:40px;  
  28.   
  29.    background:#000000;  
  30.   
  31.    position:absolute;  
  32.   
  33.    top:0px;  
  34.   
  35.     
  36.   
  37.  }  
  38.   
  39.  #moviedown  
  40.   
  41.  {  
  42.   
  43.     width:100%;  
  44.   
  45.     height:40px;  
  46.   
  47.     background:#000000;  
  48.   
  49.     position:absolute;  
  50.   
  51.     bottombottom:0px;  
  52.   
  53.  }  

 我本来把滚动效果录成微视频准备给大家看看的,但不知道是没这功能还是有点新手上路没找到在哪里上传本地视频,只能暂时先上传静态照片了,知道它是向上滚动的字幕即可,这只是滚动标签的一个简单应用,看到该篇随笔的园友们可以增添更多样式使它更加丰富多彩。

原文地址:http://www.cnblogs.com/cyn941105/p/5603995.html


html,css,div,电影,结束  
上一篇:CSS如何美化被选中的文字  下一篇:详解CSS中的选择器优先级顺序