脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > Div+CSS教程 >

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

  发布时间：2016-06-22 09:39:50   作者：佚名   我要评论
下面小编就为大家带来一篇html+css+div实现电影结束效果。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

html代码：

XML/HTML Code复制内容到剪贴板
  1. <div id="movie">  
  2.   
  3.   <div id="movieup"></div><br>  
  4.   
  5.    <marquee direction="up" height=400px;>  
  6.   
  7.      <p>导演：***</p>  
  8.   
  9.      <p>编剧：***</p>  
  10.   
  11.      <p>主演：**** ** *** </p>  
  12.   
  13.      <p>友情出演：*** *** **</p><br>   </marquee><br>  
  14.   
  15.   <div id="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复制内容到剪贴板
  1. #movie  
  2.   
  3.  {  
  4.   
  5.    width:360px;  
  6.   
  7.    height:400px;  
  8.   
  9.    background:url("F:\images\1.jpg");  
  10.   
  11.    border:1px solid #000000;  
  12.   
  13.    text-align:center;  
  14.   
  15.    margin:auto;  
  16.   
  17.    position:relative;  
  18.   
  19.  }  
  20.   
  21.  #movieup  
  22.   
  23.  {  
  24.   
  25.    width:100%;  
  26.   
  27.    height:40px;  
  28.   
  29.    background:#000000;  
  30.   
  31.    position:absolute;  
  32.   
  33.    top:0px;  
  34.   
  35.     
  36.   
  37.  }  
  38.   
  39.  #moviedown  
  40.   
  41.  {  
  42.   
  43.     width:100%;  
  44.   
  45.     height:40px;  
  46.   
  47.     background:#000000;  
  48.   
  49.     position:absolute;  
  50.   
  51.     bottombottom:0px;  
  52.   
  53.  }  

www.jb51.net

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

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

相关文章

  • 全面了解html.css溢出

    下面小编就为大家带来一篇全面了解html.css溢出。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-29

  • 使用HTML5里的classList操作CSS类

    这篇文章主要为大家详细介绍了使用HTML5里classList操作CSS类的方法，感兴趣的小伙伴们可以参考一下
    2016-06-28

  • 浅谈HTML（css基础样式）

    下面小编就为大家带来一篇浅谈HTML（css基础样式）。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-27

  • HTML (css样式规范)必看篇

    下面小编就为大家带来一篇HTML (css样式规范)必看篇。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-27

  • DW在html中插入css样式方法

    进行网页设计想要有一个好看的界面布局我们就得要使用到css样式，下面小编就为大家介绍DW在html中插入css样式方法，不会的朋友可以参考本文，来看看吧
    2016-06-22

  • Html/Css(新手入门第一篇必看攻略)

    下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-01

最新评论

关注微信公众号

扫一扫