`
magicmind
  • 浏览: 75211 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

一个字幕垂直滚动显示特效

    博客分类:
  • web
阅读更多

 前段时间做web广告页面,做了几个常见的特效,先发一个字幕垂直滚动显示的特效页面,下面上代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>滚动文字</title>
</head>
<style type="text/css">
  td {font-size: 16px;}
 .marqueeLine {
     height:40px;
	 vertical-align:middle;
 }  
</style>
<body>
<table width="490" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id="marqueeBox" style="overflow:hidden;height:40px">
        <table  border="0" cellpadding="0" cellspacing="0">
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">1 学会偷懒,并懒出境界是提高工作效率最有效的方法!</a></td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">2 显而易见,最高的效率就是对现有材料的最佳利用。</td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">3 自己能解决的事,别花钱,花钱能解决的事,别求人。</a></td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">4 旅行是需要一种心情,更重要的是,需要一种冲动。</a></td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">5 随时用零碎的时间(如等人、排队等)做零碎的事情。</a></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
</body>
<script type="text/javascript">
  var marqueeDelay=2000; //停顿延迟
  var marqueeHeight=40; //滚动高度
  var lines = 5;
  var marqueeBox = document.getElementById("marqueeBox"); 
  var rollval;
  var backval;
 
function backMarquee() {
	 marqueeBox.scrollTop--;
	 if(marqueeBox.scrollTop==0){
		 clearInterval(backval);
		 setTimeout('rollstart()',marqueeDelay);
     }
 } 
 
function scrollMarquee() {
	 marqueeBox.scrollTop++;
     if(marqueeBox.scrollTop%marqueeHeight==0){
        clearInterval(rollval);
		if(marqueeBox.scrollTop==marqueeHeight*(lines-1))
		    setTimeout('scrollback()',marqueeDelay); 
		else
		    setTimeout('rollstart()',marqueeDelay); 
    }
}

function scrollback() {
   backval= setInterval('backMarquee()',4);
}

function rollstart() {
   rollval= setInterval('scrollMarquee()',50);
}

setTimeout('rollstart()',marqueeDelay); 
</script>
</html>

 

把滚动的内容稍加改造,就可以实现图片的滚动播放

分享到:
评论

相关推荐

    滚动字幕.rar

    滚动字幕技术是多媒体制作和视频编辑中的一个重要组成部分,它通常用于在电影、电视节目、新闻播报、视频会议以及各种在线流媒体平台中显示文本信息。这种技术允许文字沿着屏幕从一侧滚动到另一侧,或者从下往上、从...

    半透明背景不透明平滑字体滚动字幕

    综上所述,本项目利用DELPHI和GDI+库,结合半透明背景、不透明字体和平滑字体效果,实现了垂直滚动字幕功能。开发者需要对DELPHI的控件操作、事件处理、GDI+图形绘制以及动画效果有深入理解,才能完成这样的功能。...

    VB6.0实现窗口文字跑马灯-文字滚动效果.rar

    VB6.0实现窗口文字跑马灯-文字滚动效果,说明:这个文字滚动控件比较不错,滚动比较平滑,没有闪烁现象,支持左右水平、上下垂直滚动。【向左滚动样式一】是循环连续滚动,【向左滚动样式二】则滚动到左端时停止一下...

    VC++仿电影字幕滚动文字特效

    摘要:VC/C++源码,其它分类,字幕滚动,文字滚动 VC++仿电影字幕滚动文字特效,使用了VC++自绘技术,其两个核心... 本滚动字幕为垂直滚动,文字由下而上滚动,鼠标可拖动滚动中的文字,整体拖动,鼠标可变为一个小宠物。

    javascript经典特效---向上滚动的文字显示.rar

    在网页设计中,JavaScript经常被用来创建各种视觉特效,其中之一就是向上滚动的文字显示。这种效果可以让文本从底部逐渐向上滚动,类似于电影字幕或者新闻滚动条,为网页增添活力和动态感。 要实现这个效果,首先...

    VB中多种图片特效的例子

    7. 滚动特效:图像沿着水平或垂直方向滚动,常用于创建滑动新闻、滚动字幕等效果。 学习这些特效,开发者可以提升VB应用程序的交互性和吸引力。在VB6中,可以通过修改控件属性、使用定时器控件以及熟练运用GDI+图形...

    VC 实现文字序幕上下滚动效果.rar

    VC 6.0实现文字上下滚动效果,类似电影字幕,定位于文字框中的文字滚动,在窗口中实现的文字垂直滚动特效。在代码中你可改变滚动文字的内容,可设置滚动速度,滚动方向,完成后文字就像电影序幕那样的效果滚动。本源...

    易语言OpenGl字幕雨源码

    字幕雨通常指的是文字以垂直下落的方式连续显示,类似于电影中的滚动字幕,但在此场景中,可能是动态的、带有视觉特效的呈现。 易语言是中国自主研发的一种编程语言,它的设计目标是使编程变得简单,适合初学者和...

    jquery滚动特效集锦

    本文将详细介绍基于jQuery实现的各种滚动特效,包括单行滚动、多行滚动以及图文翻屏滚动效果的代码实现。这些特效在网页设计中十分常见,能够提供无间断滚动的用户体验,适用于公告板、滚动新闻、广告展示等多种场景...

    支持字幕插件.(按方向键来调整视频重影问题)

    "支持字幕插件"这个标题暗示我们讨论的是一个能够添加和管理字幕的软件或功能,它允许用户在观看视频时同步显示文字,通常用于翻译、辅助听力障碍者或者增强观影体验。"按方向键来调整视频重影问题"这部分描述则提示...

    Premiere全部内置视频特效解析.pdf

    3. 摄像机视图:模拟摄像机角度变化,提供多角度视图,可通过设置经度、纬度、垂直滚动、焦距、距离、缩放、填充等参数,实现更丰富的视觉体验。 4. 水平保持:使图像在水平方向产生倾斜,常用于模拟不稳定的摄像机...

    javascript网页特效实例大全

    7.3 垂直滚动的文字 168 7.4 文字的渐隐渐显的效果 169 7.5 文字跳动的效果 170 7.6 状态栏的打字效果 172 7.7 文字的逐条显示 172 7.8 文字的旋转效果 174 7.9 文字的心跳效果 175 7.10 文字在文本框中坠落 ...

    ASS字幕位置和大小的详解.pdf

    在给出的文件中,可以看到一个示例的样式定义 `Style: Default,黑体,10,&H00FFF7F7,&HF0000000,&H00000000,&HF0000000,0,0,0,0,100,100,0,0.00,1,1,0,2,30,30,3,134G9SCb`,以及多个对话实例,如 `Dialogue: 0,0:00:...

    js技术特效

    5. 上下滚动字幕:这种效果常见于电影开场或新闻滚动条,JavaScript可以轻松实现文字或句子沿着屏幕垂直方向的滚动播放。通过定时器和字符串截取,可以控制文字的滚动速度和方向,甚至实现暂停、继续等控制功能。 ...

    itleMotion v4.2 字幕制作图文教程

    - **5-3 垂直字幕的输入**:教授如何输入垂直方向的字幕。 - **5-4 字幕模板的使用**:介绍如何利用内置模板快速制作字幕。 - **5-5 自己创造字幕外观属性**:教授如何自定义字幕的外观属性,如字体、颜色等。 - **5...

    JavaScript源码大全 v1.0

    通过定时更新文本位置,可以实现文字的水平或垂直滚动,同时结合CSS样式,可以调整字体、颜色、大小,以适应不同设计需求。 2. **图像特效**:JavaScript可以控制图片的加载、显示、隐藏、旋转、缩放等。例如,你...

    Premiere考试试题.doc

    在 Premiere 中,滚动字幕实现字幕的水平移动,而游动字幕则可以实现字幕的垂直移动。 4. 在 Premiere 中,可以在素材间添加默认转场,用快捷键可以实现默认的转场叠化。同时,Premiere 中的锐化和模糊化可以将镜头...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤...

    程序天下:JavaScript实例自学手册

    3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤...

Global site tag (gtag.js) - Google Analytics