`
daidalei321
  • 浏览: 110781 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js生成自下往上滚动的字幕

阅读更多

生成自下往上滚动的字幕
    使用方法:设置需要滚动图层 id=marquees,然后调用下面代码

<SCRIPT language=JavaScript>

 <!--
 marqueesHeight=180; //内容区高度
 stopscroll=false; //这个变量控制是否停止滚动
 with(marquees){
 noWrap=true; //这句表内容区不自动换行
 style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
 style.height=marqueesHeight;
 style.overflowY="hidden"; //滚动条不可见
 onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
 onmouseout=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()",20);
 }
 document.body.onload=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>

分享到:
评论

相关推荐

    用JavaScript和ASP制作连续滚动的字幕

    JavaScript 和 ASP 是两种在网页开发中广泛使用的编程语言。JavaScript 主要用于客户端的交互效果,而 ...在实际项目中,可以根据需求进行灵活调整,同时注意兼容不同浏览器,确保滚动字幕在各种环境下都能正常工作。

    asp和vbscript滚动字幕连接数据库代码

    根据提供的标题、描述、标签及部分内容,我们可以了解到这段代码是使用ASP(Active Server Pages)结合VBScript实现的一个滚动字幕功能,并且该功能能够从数据库中读取新闻标题等相关信息来展示滚动字幕。...

    屏幕字幕滚动

    3. **字幕渲染**:在屏幕上显示字幕涉及到渲染技术,通常使用编程语言如JavaScript、Python或C#编写代码来解析字幕文件,并根据时间码在屏幕上适时显示和隐藏字幕。 4. **滚动效果**:滚动字幕是字幕显示的一种特殊...

    制作滚动字幕,很方便!

    ### 制作滚动字幕的方法与技巧 在网页设计中,滚动字幕是一种常见的视觉元素,它可以用来展示新闻、公告或是吸引用户注意力的信息。通过HTML `&lt;marquee&gt;` 标签,我们可以轻松地实现这一功能。本文将详细介绍如何...

    完整版滚动网络字幕.rar

    7. **集成到网页**:在网页上实现滚动字幕,需要通过JavaScript或HTML5的`&lt;track&gt;`元素将字幕文件与视频结合。`&lt;track&gt;`元素允许定义不同的字幕轨道,用户可以根据需要选择。 8. **响应式设计**:考虑到不同设备和...

    完整版滚动网络字幕.e.rar

    滚动字幕是指字幕沿着屏幕底部或顶部滚动展示的方式,这在电视和电影中很常见,而在网络环境中,这种形式也常用于直播或在线视频播放。这种字幕格式需要与视频内容同步,确保文字的出现与音频内容匹配。 在“滚动...

    基于 Vue 实现的循环滚动字幕的示例.docx

    这里,`&lt;div id="app"&gt;` 是 Vue 应用的挂载点,`v-for` 指令用于遍历 `items` 数组,生成多个包含滚动字幕的 `.marquee-text` 元素。`:key` 属性用于指定每个元素的唯一标识,这对 Vue 的虚拟 DOM 更新非常重要。 ...

    怎样用javascript实现图片滚动

    在很多网页当中,对字幕或是图片的滚动支持都不是很好.而且不够灵活.本脚本,可以任意生成多个对像,同时多个滚动.采用类的方法.

    IE 展示 上下滚动 实现Marquee机制

    标题 "IE 展示 上下滚动 实现Marquee机制" 暗示了我们要讨论的是在Internet Explorer浏览器中实现一种类似电视新闻滚动字幕的效果,通常这种效果被称为Marquee(滚动条)。Marquee元素在HTML中用于创建一个可以自动...

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

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

    一个匀速滚动的H5弹幕组件

    【匀速滚动H5弹幕组件】是一种在网页上实现类似电视直播中滚动字幕效果的前端技术。这种组件常用于展示用户评论、活动信息或其他动态消息,为网站或应用增添互动性和趣味性。在本案例中,我们将讨论如何利用...

    mouseover时显示滚动字幕 特效

    根据提供的文件信息,可以推断出文档讲述了在网页中通过鼠标悬停(mouseover)事件触发滚动字幕(marquee)特效的实现方式,并且提到了夫子在线这个平台,以及涉及到了SEO(搜索引擎优化)的概念。由于文档提到...

    HTML-状态栏组合字幕出现

    此段代码主要使用了JavaScript来实现状态栏文本的滚动效果。 ##### 1.1 初始化变量 ```javascript var speed = 10; var pause = 1500; var timerID = null; var bannerRunning = false; ``` - `speed`:定义了每次...

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

    8.12 带链接的滚动字幕 8.13 会跳舞的链接 8.14 检测站点的连接速度 8.15 文本链接的渐变效果 第9章 表格特效 9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 ...

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

    想要实现连续滚动,就必须将要滚动的字幕内容一遍遍地进行复制,直到复制后的内容高度超出滚动区域的高度的两倍,接着再隐藏掉溢出的滚动条,用代码控制滚动条向下移动生成的滚动条。 以上两个实例只是 JavaScript ...

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

    8.12 带链接的滚动字幕 8.13 会跳舞的链接 8.14 检测站点的连接速度 8.15 文本链接的渐变效果 第9章 表格特效 9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 ...

    数字卷轴特效

    `countUp.js`是一个轻量级的JavaScript插件,专门用于生成类似电影字幕滚动或数字递增的动画效果。这个库通过模拟数字逐个增加的过程,使得数字变化更加平滑自然,增强了用户的视觉体验。下面,我们将详细介绍`count...

    JavaScript项目源码基础+进阶.zip

    在这个项目中,你可以了解到如何利用JavaScript的定时器(setTimeout或setInterval)和DOM操作来创建滚动字幕。 其次,js计算器是一个经典的JavaScript应用示例,它涉及到事件监听、数学计算以及用户界面的交互设计...

    hubot-dora:ot啦A梦字幕生成器

    Hubot-dora 是一个基于 Hubot 的有趣插件,通过使用 CoffeeScript 和 JavaScript 编程,实现了 ot啦A梦式的滚动字幕效果。它不仅展示了 Hubot 的可扩展性,也为聊天室带来了创意的互动体验。对于熟悉 JavaScript 和 ...

    Dreamweaver也能轻松制作Flash相册

    通过以上详细的操作步骤和知识点介绍,可以清晰地了解到如何使用Dreamweaver轻松制作Flash相册,以及如何利用marquee标签创建滚动字幕等内容。这些技能对于网页设计师来说是非常实用的,可以帮助他们快速高效地完成...

Global site tag (gtag.js) - Google Analytics