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

垂直方向连续滚动字幕的实现

 
阅读更多

最近想实现在垂直方向上滚动字幕,并切实现字幕的无缝连接  
即在屏幕的指定区域,嵌入一段很长的文字,文字由下向上滚动,当滚   动到最末一行,首行立即紧跟着最末一行出来,与最末一行同时在一 个屏幕内滚动。

 

 

里面可以加图片,还可加链接  
   
   
  <div   id=demo   style=overflow:hidden;height:70;width:400>    
  <div   id=demo1>  
  <a   href=''   target='_blank'>这是滚动第1行</a><br>  
  这是滚动第2行<br>  
  这是滚动第3行<br>  
  这是滚动第4行<br>  
  这是滚动第5行<br>  
  这是滚动第6行<br>  
  这是滚动第7行<br>  
  这是滚动第8行<br>  
  </div>  
  <div   id=demo2></div>  
  </div>  
  <script>  
  var   speed=30  
  demo2.innerHTML=demo1.innerHTML  
  function   Marquee()  
  {  
  if(demo2.offsetTop-demo.scrollTop<=0)  
  demo.scrollTop-=demo1.offsetHeight  
  else  
  {  
  demo.scrollTop++  
  }  
  }  
  var   MyMar=setInterval(Marquee,speed)  
  demo.onmouseover=function()   {clearInterval(MyMar)}  
  demo.onmouseout=function()   {MyMar=setInterval(Marquee,speed)}  
  </script>
 
0
0
分享到:
评论

相关推荐

    Android垂直滚动的图文混排字幕效果

    首先,理解“垂直滚动字幕”是指文字或图片沿着垂直方向连续滚动,类似于电视新闻中的滚动字幕。而“图文混排”则意味着在同一个视图中既有图片也有文字,它们按照一定的规则排列组合。 1. **布局设计**: 使用`...

    (Static)控件实现滚动字幕

    5. **重绘定时器**:为了实现连续滚动,我们需要设置一个定时器,每隔一定时间间隔(如10毫秒)调用OnPaint()函数重新绘制控件。 在压缩包中的FlowStaticTester可能是一个测试应用程序,用于验证和展示CSinusFrame...

    垂直滚动的TextView

    开发者可能需要设置一个定时器(如`Handler`和`Runnable`),每隔一定时间更新文本的位置,从而实现连续滚动的效果。 在实际应用中,你可以根据需求调整滚动速度、滚动方向、是否循环滚动等参数。此外,可能还会有...

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

    ### 使用JavaScript和ASP实现连续滚动字幕的详细解析 #### 技术背景及应用场景 在网站建设和维护过程中,滚动字幕是一种常见的展示方式,尤其适用于新闻公告、活动通知等需要实时更新信息的场景。传统的...

    C#实现滚动字幕完整源码

    滚动字幕通常是在一个指定区域(如窗口或控制台)内,按照一定的速度和方向连续显示文本,可以是水平滚动、垂直滚动或自定义路径。为了实现这个功能,我们需要创建一个可以动态更新文本的UI元素,比如一个TextBox或...

    实现横向字幕滚动

    `postInvalidateDelayed()`用于在一定时间后重新绘制View,以实现连续滚动。 为了使滚动效果更流畅,我们还需要在`onMeasure()`方法中禁用内置的滚动,因为默认的滚动机制与我们的自定义滚动冲突: ```java @...

    字幕滚动 QT

    对于字幕滚动,可以将动画应用到`QLabel`的`y`坐标属性上,使其沿着垂直方向移动。设置好动画的起始和结束位置,以及持续时间,可以调整滚动速度。 3. **计时器控制**:`QTimer`是QT中的一个关键组件,用于执行周期...

    仿暴风影音文字垂直滚动广告

    例如,可以使用`setInterval`函数来定时更新元素的位置,实现连续滚动。 2. **CSS3动画**:CSS3提供了丰富的动画功能,如`transition`和`animation`属性,可以用来创建文字滚动效果。通过改变元素的`transform`属性...

    gundongzimu.rar

    滚动字幕是指文字或信息沿着特定方向连续滚动显示,这种效果常见于电影开场、新闻播报以及各种软件界面中。在编程实现上,主要涉及时间控制、字符串处理和图形绘制等技术。 二、VC++环境搭建 首先,我们需要一个...

    51单片机LCD1602滚动显示

    这个过程可以通过软件定时器来控制,以实现连续平滑的滚动。 在编程实现时,一般会用到51单片机的IO口控制数据线和控制线,发送相应的指令和数据。例如,通过P0口发送8位数据,P2口控制读写和使能信号。编程语言...

    制作网页中的滚动文字

    它允许网页设计者在页面上创建动态滚动的效果,无论是水平还是垂直方向。值得注意的是,`&lt;marquee&gt;`标签并非HTML5标准的一部分,但在许多现代浏览器中仍然得到支持。 #### 2. 属性详解 `&lt;marquee&gt;`标签包含多个可...

    vb.net做的滚动条的效果

    首先,VB.NET提供了丰富的控件库,包括`ScrollBar`控件,它可以用于创建水平或垂直方向的滚动条。然而,根据描述,这里实现的是滚动字幕的效果,而不是传统的滚动条。这通常会使用`Label`控件配合定时器(`Timer`...

    微信小程序实现自上而下字幕滚动

    然而,这种方法可能并不完全符合自上而下字幕滚动的需求,因为它更像一个逐帧播放的动画,而不是连续滚动。 **第二种方法:利用微信小程序动画API** 如果`swiper`组件无法满足需求,开发者可以利用微信小程序的...

    js滚动集合(图片滚动,文字滚动)

    2. **滑动展示**:通过鼠标滚轮或触摸滑动,图片沿着水平或垂直方向平滑移动,展示多张图片。 3. **无限循环**:当图片滚动到最后一张时,无缝衔接回到第一张,形成连续的滚动效果。 二、文字滚动 文字滚动则主要...

    在QQ空间加入滚动字的代码.txt

    默认情况下是`scroll`,即连续滚动;可以选择`slide`让文字只滚动一次后停止;也可以选择`alternate`让文字在两个方向间来回滚动。 通过以上知识点的介绍,我们可以清楚地了解到如何利用HTML中的`&lt;marquee&gt;`标签来...

    [详细完整版]多媒体效果.ppt

    首先,让我们来看一下滚动字幕的实现方法。滚动字幕是通过HTML中的`&lt;marquee&gt;`标签来创建的,它允许文字在网页上滚动显示,增加视觉吸引力。`&lt;marquee&gt;`标签有多个属性,用于控制滚动效果: 1. `direction`: 这个...

    文字滚动代码教程

    - 可选值包括:`scroll`(连续滚动)、`slide`(滑动一次后停止)、`alternate`(来回滚动),默认为`scroll`。 3. **loop** - 表示循环次数 - 值为正整数,表示滚动多少次后停止;若省略,则默认为无限循环。 ...

    jquery滚动特效集锦

    通过jQuery的animate()方法,可以实现内容在垂直方向上的平滑滚动。具体实现方式是通过修改元素的CSS样式,如margin-top属性,来达到滚动效果。当元素滚动到指定位置时,使用callback函数把元素的第一个子元素移动到...

    国家电网水平考试题

    页面由2行1列的表格构成(表格宽度为650像素、不显示边框线),在表格的第1行第1列单元格中,插入字幕“国际电力动态”(字幕文字设置为楷体GB_2312、5(18磅)、青色、方向向右、连续、滚动条的表现方式、银白色的...

Global site tag (gtag.js) - Google Analytics