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

时间:2021-05-08

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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章