经常我们看 电影 都会看到 电 影结束后会出现一段介绍这个电影的导演、编剧、主演、友情出演 等等 一些电影信息的滚动字幕,那么那个效果可以用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实现电影结束效果的详细内容...