今天小编跟大家讲解下有关html+css+div实现电影结束效果 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html+css+div实现电影结束效果 的相关资料,希望小伙伴们看了有所帮助。
经常我们看电影都会看到电影结束后会出现一段介绍这个电影的导演、编剧、主演、友情出演等等一些电影信息的滚动字幕,那么那个效果可以用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=http://xyrl.com/skin/7ke/image/nopic.gif </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:\images\1.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; }我本来把滚动效果录成微视频准备给大家看看的,但不知道是没这功能还是有点新手上路没找到在哪里上传本地视频,只能暂时先上传静态照片了,知道它是向上滚动的字幕即可,这只是滚动标签的一个简单应用,看到该篇随笔的园友们可以增添更多样式使它更加丰富多彩。
原文地址:http://www.cnblogs.com/cyn941105/p/5603995.html
来源:爱蒂网