好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

html代码:

XM L/HTML Code 复制内容到剪贴板

< div &nbs p; id = " ;m ovie" >          < div   id = "movieup" > </ div > < br >           < marquee   direction = "up"   h ei ght = 400px ; >             < p > 导演:*** </ p >             < p > 编剧:*** </ p >             < p > 主演:**** ** ***  </ p >             < p > 友情出演:*** *** ** </ p > < br >     </ marquee > < br >          < div   id = "moviedown" > </ div > < br > </ div >   

滚动标签: <marquee>要滚动的文字/图像< img src=]]>  </marquee>

下面是我对滚动标签中的一些常见属性的罗列:

滚动 方向 direction=up/down/left/right (向上/向下/向左/向右)

滚动速度 scrolla mount =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 复制内容到剪贴板

# movie        {          width : 360 px ;          height : 400px ;          background : url ( "F:\images\1. jpg " );          border : 1px   solid   #000000 ;          text-align : center ;          m arg in : auto ;          pos IT ion : relative ;       }        #movieu p       {          width :100%;          height : 40px ;          background : #000000 ;          position : absolute ;          top : 0px ;               }        #movied own       {           width :100%;           height : 40px ;           background : #000000 ;           position : absolute ;           bottom bottom : 0px ;       }  

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

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

总结

以上是 为你收集整理的 html+css+div实现电影结束效果 全部内容,希望文章能够帮你解决 html+css+div实现电影结束效果 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html+css+div实现电影结束效果的详细内容...

  阅读:16次