`
magicmind
  • 浏览: 74616 次
  • 性别: 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>

 

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

分享到:
评论

相关推荐

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

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

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

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

    javascript网页特效实例大全

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

    JavaScript源码大全 v1.0

    本文档详细介绍包括: 文字特效 图像特效 菜单特效 鼠标特效 背景特效及页面特效及其其他特效,例如:中文日期,带链接的滚动字幕,垂直滚动公告板。。。

    《程序天下: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过滤...

    flashmtv的制作

    有些人喜欢每张图片或每个道具都单独建立一个层,更有人喜欢把每句歌词建一个层,这样一首歌也有几十甚至上百个层,层数太多了,有时就不能完全显示,编辑的时候也容易出错,利用层文件夹把同一类型的层放在一起,无论编辑...

    《JavaScript实例精通》[源代码]

    19_4.htm 垂直滚动公告板。 19_5.htm 关闭窗体。 19_6.htm 分时问候。 19_7.htm 密码保护页面。 19_8.htm 当前的时间。 第20章(\20) 示例描述:正则表达式。 20_1.htm 校验是否全由数字组成。 20_2....

    JavaScript实例精通

    19_4.htm 垂直滚动公告板。 19_5.htm 关闭窗体。 19_6.htm 分时问候。 19_7.htm 密码保护页面。 19_8.htm 当前的时间。 第20章(\20) 示例描述:正则表达式。 20_1.htm 校验是否全由数字组成。 20_2....

    C#开发实例大全(基础卷).软件开发技术联盟(带详细书签) PDF 下载

    实例188 窗体中的滚动字幕 250 实例189 动画显示窗体 251 实例190 制作类似Office的提示精灵 252 实例191 动画形式的程序界面 254 8.5 特色程序界面 255 实例192 仿QQ抽屉式窗体 255 实例193 设计软件启动界面 257 ...

Global site tag (gtag.js) - Google Analytics