> 웹 프론트엔드 > HTML 튜토리얼 > 电影结束效果的实现_html/css_WEB-ITnose

电影结束效果的实现_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:14:53
원래의
1196명이 탐색했습니다.

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

html代码:

<div id="movie">  <div id="movieup"></div><br />   <marquee direction="up" height=400px;>     <p>导演:***</p>     <p>编剧:***</p>     <p>主演:**** ** *** </p>     <p>友情出演:*** *** **</p><br />   </marquee><br />  <div id="moviedown"></div><br /></div>
로그인 후 복사

  滚动标签:要滚动的文字/图像电影结束效果的实现_html/css_WEB-ITnose

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

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

 #movie  {    width:360px;    height:400px;    background:url("F:\images\1.jpg");    border:1px solid #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;     bottom:0px;  }
로그인 후 복사

  

 

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

 

  

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿