<div id="marquees">
<!-- 这些是字幕的内容,你可以任意定义 -->
<a href="#">链接一</a>
<br> <a href="#">链接二</a>
<br> <a href="#">链接三</a>
<br> <a href="#">链接四</a>
<br> <!-- 字幕内容结束 -->
</div>
<!-- 以下是java-script代码 -->
<script language="java-script">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
οnmοuseοver=new Function("stopscroll=true"); //鼠标经过,停止滚动
οnmοuseοut=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer"
style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",10);
}
document.body.οnlοad=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
 原文地址 http://tech.sina.com.cn/c/2003-04-18/18689.html

转载于:https://www.cnblogs.com/kelly/archive/2008/09/10/1288423.html

使用Javascript制作连续滚动字幕相关推荐

  1. Java写字幕滚动,使用JavaScript实现连续滚动字幕效果的方法

    我们一般都用Marquee标签控制元素的滚动.但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白.而下面介绍中的滚动则是连续的,毫不间断. 下面为你介绍这是如何实现的. 为了滚动能够 ...

  2. Unity3D制作LED滚动字幕(跑马灯)效果

    Unity3D制作LED滚动字幕(跑马灯)效果 搭建场景 建立世界坐标的Canvas 新建LED模型 Text节点 Mask节点 查看效果 美化一下 编写代码 DOTween插件 设置属性 编写文字滚 ...

  3. gridview标题居中显示_Pr:制作片尾滚动字幕(旧版标题法)

    本文介绍使用 Pr 的旧版标题设计器来制作传统片尾滚动字幕的方法. 效果视频 ◆  ◆  ◆ 一般方法与步骤 1.首先,将文字内容输入到一个文本文件中.按 Ctrl/Cmd + A 全选,按 Ctrl ...

  4. datagrid底部显示水平滚动_看完《惊奇队长》等彩蛋,我想到了一个制作PPT滚动字幕的方法...

    滚动字幕大家都不陌生,每每看完电影,影院亮灯的时候就能看到: 电影片尾滚动字幕 前两天去看了<惊奇队长>,在等彩蛋的过程中,看着一行行的字幕在面前滚动,我突然想到:这种滚动字幕式动画,其实 ...

  5. Pr:制作片尾滚动字幕(旧版标题法)

    本文介绍使用 Pr 的旧版标题设计器来制作传统片尾滚动字幕的方法. 效果视频 ◆  ◆  ◆ 一般方法与步骤 1.首先,将文字内容输入到一个文本文件中. 按 Ctrl/Cmd + A 全选,按 Ctr ...

  6. pr制作片尾滚动字幕

    片尾滚动字幕 步骤: 导入素材缩放为55% -->轨道1 对素材添加裁剪 左右:8% 对素材添加斜角边 厚度设置为:0.02 Alt复制素材 -->轨道2 对轨道2添加垂直翻转 降低轨道2 ...

  7. c# winfrom 制作的滚动字幕动画窗体

    方法/步骤 先打开vs创建一个工程,创建一个窗体应用程序如下图: 从工具箱里向窗体添加lable和timer控件,并设置界面内容,如下图: 设置窗体的属性,如下图: 双击窗体添加Form1_Load事 ...

  8. html怎么制作公告滚动字幕,实现公告文字轮播效果

    公告 暂无公告 {{text.val}} import baseModule from '../baseModule' export default { name: "announcemen ...

  9. html 字幕飘动效果,html 滚动字幕 制作滚动字幕效果 参数

    制作滚动字幕效果:marquee标签 如下:<MARQUEE direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scro ...

最新文章

  1. EXPDP 时ORA-27054 问题处置
  2. 简述ssl协议及利用openssl创建私有CA
  3. gitlab mysql启动不了_gitlab不支持mysql,这就是我学习PostgreSQL的原因
  4. fatal error: hdf5.h: No such file or directory
  5. nginx监听事件流程
  6. 【Java学习笔记之十八】Javadoc注释的用法
  7. treeset java api_JAVAAPI学习值TreeSet类
  8. CRM客户管理系统源码PHP开发搭建
  9. 好用免费的FTP软件工具推荐,支持中文 速来领取
  10. 谷歌的Pixel Watch学习能力爆表,他能从手机中学到什么呢?
  11. C语言中的逻辑移位和算术移位
  12. jmeter将上一个接口的返回值作为下一个接口的参数
  13. MATLAB下机器人可视化与控制---simulink篇(1)
  14. 基于微信理共享停车位预约小程序系统设计与实现 开题报告
  15. html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
  16. AOSP Android 12网盘下载(android-12.1.0_r5),78.3G
  17. C#开发基于ESMTP协议的邮件发送系统经验总结
  18. 并查集的一些个人观点 以及克鲁斯卡尔算法的详解
  19. 外键不兼容问题( in foreign key constraint are incompatible)
  20. android 齐刘海编程,[翻译]Android适配全面屏上的齐刘海

热门文章

  1. 12面魔方公式图解法_【高级篇】(三)三阶魔方CFOP高级玩法之——F2L
  2. python图像验证码识别_python 简单图像识别--验证码
  3. oracle入门知识实施,新手必须了解的oracle入门知识
  4. ajax bootstrap 进度条,Bootstrap进度条与AJAX后端数据传递结合使用实例详解
  5. nc65语义模型设计_完整word版,NC数据加工做语义模型
  6. matlab神经网络的简单程序设计,BP神经网络设计的matlab简单实现
  7. nike附近门店查询_门店配送的全国服务网络如何快速成功运营?
  8. 中国文学发展史思维导图
  9. opencv-contrib配置过程
  10. HALCON双目重建