手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >html+css+div实现电影结束效果
html+css+div实现电影结束效果
摘要:经常我们看电影都会看到电影结束后会出现一段介绍这个电影的导演、编剧、主演、友情出演等等一些电影信息的滚动字幕,那么那个效果可以用html+c...

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

html代码:

XML/HTML Code复制内容到剪贴板 <divid="movie"> <divid="movieup"></div><br> <marqueedirection="up"height=400px;> <p>导演:***</p> <p>编剧:***</p> <p>主演:*********</p> <p>友情出演:********</p><br></marquee><br> <divid="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复制内容到剪贴板 #movie { width:360px; height:400px; background:url("F:images1.jpg"); border:1pxsolid#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; bottombottom:0px; }

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

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

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

【html+css+div实现电影结束效果】相关文章:

css div实现的遮罩层完美兼容IE6-IE9 FireFox

CSS+jQuery实现的在线答题功能

div中内容上下居中小结教程

纯CSS代码实现翻页焦点图效果

css实现鼠标滑过改变文字(中文变英文)

利用css实现图片等比例缩放

纯css实现的tab切换效果

用CSS实现文字的阴影效果

css图片透明效果

文字环绕图片的布局效果

精品推荐
分类导航