栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

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

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

html代码:

XML/HTML Code复制内容到剪贴板
  1.   
  2.   
  3.   

  
  •   
  •      
  •   
  •      

    导演:***

      
  •   
  •      

    编剧:***

      
  •   
  •      

    主演:**** ** *** 

      
  •   
  •      

    友情出演:*** *** **


       
      
  •   
  •   

  •   

    滚动标签:要滚动的文字/图像 

    下面是我对滚动标签中的一些常见属性的罗列:

    滚动方向 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()

    (鼠标放上面滚动效果停止,鼠标离开滚动继续)

    注:以上都可作为标签对里的开始标签里的属性添加想要的效果

    css:

    CSS Code复制内容到剪贴板
    1. #movie  
    2.   
    3.  {  
    4.   
    5.    width:360px;  
    6.   
    7.    height:400px;  
    8.   
    9.    background:url("F:images1.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

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/215816.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号