`
shirlly
  • 浏览: 1648359 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

不间断滚动字幕的实现

 
阅读更多
[color=red][/color]在body中插入如下代码
<div id="layer1" style="overflow-y:hidden;width:50;">
    <div id="layer2">
<table width="130" height="70" border="0" align="center" cellpadding="0" cellspacing="0" >
  <tr>
<td  height="70" valign="top" >
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
定义滚动区域的高度定义滚动区域的高度<br>
</td>
       </tr>
      </table>
     </div>
     <div id="layer3"></div>
</div>
在</html>后面插入控制滚动的JS代码
<script language="javascript">
    var layerHeight = 100; // 定义滚动区域的高度.
var iFrame = 1; // 定义每帧移动的象素.
var iFrequency = 50; // 定义帧频率.
var timer; // 定义时间句柄.
    if(document.getElementById("layer2").offsetHeight >= layerHeight)
     document.getElementById("layer1").style.height = layerHeight;
else
     document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
function move(){
     if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight)
      document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame)
  else
      document.getElementById("layer1").scrollTop += iFrame
}
timer = setInterval("move()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
    document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
</script>
注意这点代码一定要放在最后,要不然有时没有效果
分享到:
评论

相关推荐

    JS实现文本不间断上线滚动效果【转】

    `index % lines.length`确保当所有行都滚动过之后,能回到第一行,实现不间断滚动。 需要注意的是,实际应用中可能需要根据具体需求调整滚动速度、文本样式、是否支持暂停/恢复滚动等功能。此外,对于复杂的滚动...

    连续滚动字幕!!!!!!

    本项目"连续滚动字幕"是利用jQuery来实现的一种常见网页动态效果,常用于电影预告片、新闻滚动条或者网站公告等场景。接下来我们将深入探讨如何使用jQuery创建这样的滚动字幕效果。 首先,我们需要了解jQuery的基本...

    Delphi原生文字滚动 向上的字幕滚动.rar

    Delphi原生文字滚动 向上的字幕滚动,滚动速度可自定义,程序本身没有使用Delphi之外的控件,在Delphi7环境可直接编译,实现类似电影序幕那样的文字向上不间断滚动特效,相关代码:  zShowLine(self);//显示字符串...

    js实现的文字横向无间断滚动

    ### JavaScript 实现文字横向无间断滚动 #### 一、需求背景 在Web开发中,有时需要实现一种视觉效果——让一段文字或一系列元素在页面上进行横向无间断滚动。这种效果常见于新闻网站、广告展示等场景,能够吸引...

    ios纵向滚动跑马灯字幕

    "循环滚动字幕"的标签进一步明确了这个功能的核心特性。循环滚动意味着字幕不是一次性显示完,而是持续不断地从屏幕底部滚入,顶部滚出,形成一种不间断的流动效果。这种滚动通常是自动进行的,也可以根据用户需求...

    使用JavaScript实现连续滚动字幕效果的方法

     为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不...

    文字间歇向上滚动代码(兼容IE,FF)

    这个效果通常被称为“滚动字幕”或“跑马灯”。标题“文字间歇向上滚动代码(兼容IE,FF)”表明我们将探讨一个JavaScript实现的解决方案,该方案不仅能在现代浏览器如Firefox中正常工作,而且还能兼容老版本的...

    jquery实现文字由下到上循环滚动的实例代码

    本文将详细介绍如何使用jQuery来实现一个常见的Web效果——文字由下到上循环滚动。 要实现文字由下到上循环滚动效果,需要使用到jQuery的几个核心功能:选择器、动画和定时器。具体来说,需要用到以下知识点: 1. ...

    javascript 实现滚动效果代码整理

    使用JavaScript实现平稳不间断滚动 文档中还介绍了使用JavaScript实现更为复杂和可控的滚动效果。这里定义了一个`newsScroll`函数,通过定时器`setInterval`每隔25毫秒执行一次。这个函数会检查一个元素(通过其ID...

    【JavaScript源代码】jQuery实现动态向上滚动.docx

    1. **“永动”(infinite)**:为了实现不间断滚动,开发者通常会利用JavaScript的定时器`setInterval()`函数。这个函数可以定期执行指定的函数,使内容不断滚动,创造出无限滚动的视觉效果。 2. **循环**:循环...

    浅析js 文字滚动效果

    示例中分别演示了带停顿效果和不间断连续运行两种不同的滚动方式。 这种实现文字滚动的方法,虽然简单实用,但需要注意的是,在实际应用中,过度使用动态效果可能会对用户体验产生负面影响。因此,设计者应当根据...

    文字,图片 无间隔滚动 有三种方式

    这种效果通常由JavaScript实现,能够使页面内容以不间断的方式滚动展示,提升用户体验。根据标题和描述,我们将探讨三种不同的滚动方式:间隔式滚动、向上滚动、向下滚动以及滚水式向上滚动。 1. **间隔式滚动** ...

    利用JavaScript实现网页动态效果.pdf

    那麼怎样才能制作出毫不间断、连续滚动的字幕效果呢?想要实现连续滚动,就必须将要滚动的字幕内容一遍遍地进行复制,直到复制后的内容高度超出滚动区域的高度的两倍,接着再隐藏掉溢出的滚动条,用代码控制滚动条向...

    jquery滚动特效集锦

    这些特效在网页设计中十分常见,能够提供无间断滚动的用户体验,适用于公告板、滚动新闻、广告展示等多种场景。通过本文提供的代码示例,读者能够更好地理解和应用jQuery,创建出富有吸引力的动态网页元素。 1. ...

    动态网站第四讲(共39张PPT)精选.pptx

    能力目标包括掌握如何使用行为技术插入背景音乐,运用Marquee标签制作滚动字幕,利用AP元素、时间轴和行为技术制作运动广告,以及使用Javascript代码实现图片轮番显示和无缝滚动效果。知识目标则是理解行为的概念,...

    硬盘播出系统ST2000

    它集成了先进的数字视频处理技术,可以实现高效率、高稳定性的24/7不间断播出服务。这种系统通常由硬件服务器、专业播放软件以及一系列管理工具组成,能够满足电视台对节目制作、调度和播放的全方位需求。 在硬盘...

    兼容多浏览器的字幕特效Marquee的通用js类

    它允许用户自定义滚动方向(上、下、左、右)、延迟时间、步长以及是否无间断滚动。关键在于,当字幕区域的内容长度小于设定的区域尺寸时,Marquee.js默认不会进行滚动,这提高了用户体验,避免了无效的滚动动作。 ...

    x+show电子显示屏

    2. **实时信息更新**:X+Show能够实时接收和显示动态数据,例如倒计时、实时比分、滚动字幕等,适用于各种实时信息传递场景。 3. **多屏幕管理**:对于拥有多个显示屏的场合,X+Show可以轻松管理多个显示设备,实现...

    MCS4200技术要求(正偏离)_IT项目管理运维服务体系构建方案运维规范范文模板、毕业设计.doc

    - **中文界面**:操作界面必须是中文,支持中文站点名和字幕滚动。 - **分屏能力**:支持16分屏,可灵活切换模式,不影响MCU容量。 - **音频编解码**:遵循G.711、G.722、G.722.1、G.728协议,接近CD音质,支持G....

    直播系统软件Liveone3.9

    支持字幕、台标、时间等实时插入,支持字幕滚动显示; 5.支持Access、SQL Server等多种数据库,可轻松嵌入到其它OA系统或者门户网站中,实现同一界面统一管理; 6.标准二次开发接口,支持二次开发。

Global site tag (gtag.js) - Google Analytics