`
hereson
  • 浏览: 1464181 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

用JavaScript编写程序实现文本滚动

阅读更多

在一些网页上,们经常看到一些滚动文本,很酷的,如何做呢?

  下面我们就以徐志摩的一首《再别康桥》为例,用JavaScript编写一段程序,来实现文本的滚动。

  1.运行Dreamweaver应用程序,单击工具栏中的“显示代码视图和设计视图”按钮,<!---->

<!---->
在打开的代码窗口中,把下面这一段代码,插入到< head>区域中。

  < SCRIPT LANGUAGE="JavaScript">

  < !-- Begin

  function selectScroller(n) {

  optlist = document.scrollform.scroller;

  optlist[optlist.length] = new Option(optlist[0].text, "", false, false);

  optlist[0] = null;

  optlist.selectedIndex = -1;

  n = (n + 1) % optlist.length;

  setTimeout("selectScroller("+n+")",2000);

  }< /p>

  < /script>

  这段代码是为了控制文本的播放速度的。

  2.把如下代码加入区域中

  < form name="scrollform">

  < select name="scroller" size=8>

  < option>轻轻的我走了,

  < option>正如我轻轻的来;

  < option>我轻轻的招手,

  < option>作别西天的云彩。

  < option>

  < option>那河畔的金柳,

  ……

  < option>悄悄的我走了,

  < option>正如我悄悄的来;

  < option>我挥一挥衣袖,

  < option>不带走一片云彩。

  这段程序是为了控制文本框的大小和显示所滚动的文本内容。

  3.把< body>改为

  < BODY OnLoad="selectScroller();">

  嵌入以上代码后,按F12键,观看效果。

分享到:
评论

相关推荐

    js实现单行文字滚动

    在本文中,我们将深入探讨如何使用JavaScript实现单行文字的滚动效果,这是一种常见的动态显示信息的方式,尤其适用于有限的空间展示大量文本。 首先,我们需要理解基本的HTML结构,因为JavaScript通常与HTML和CSS...

    文本垂直无滚动条滚动(jquery)

    当文本滚动到顶部时,会将其重新定位到底部,形成无限循环滚动的效果。 需要注意的是,实际项目中可能需要考虑文本的动态加载或更新,以及对不同浏览器的兼容性问题。此外,如果文本内容较长,可以考虑使用CSS的`...

    js实现文字内容无缝滚动动画效果

    3. **JavaScript核心逻辑**:接下来,利用JavaScript编写动画函数。这个函数通常包含两个主要部分: - **移动内容**:通过修改CSS的`top`或`transform`属性,让文字内容向上或向下移动,模拟滚动效果。你可以使用`...

    JavaScript实现的公司抽奖程序

    在这个"JavaScript实现的公司抽奖程序"中,我们将会深入探讨如何利用JavaScript来创建一个具有滚动效果的抽奖系统。 首先,抽奖系统的实现通常包括以下几个关键部分: 1. **数据管理**:抽奖名单的存储和管理是...

    滚动的文本.rar 文本向上定时及无缝滚动的文本

    对于多行文本的无缝滚动,可以使用循环逻辑,当文本滚动到顶部时,将其位置重置为原始状态,从而实现无缝效果。 具体实现过程可能包括以下步骤: 1. 创建HTML结构,包括包含滚动文本的元素。 2. 编写JavaScript代码...

    jquery文本单行多行滚动特效

    文本滚动特效是指将文字或文本列表以滚动的方式呈现,可以是单行平滑滚动,也可以是多行交替滚动,创造出动态的视觉效果。这样的效果不仅能够节省页面空间,还能够增加信息传递的趣味性。 在jQuery中实现这个特效,...

    javascript小程序 实例

    3. **事件处理**:JavaScript通过事件监听和事件处理函数来响应用户的交互,如点击按钮、滚动页面、输入文本等。这些实例将展示如何绑定和解绑事件,以及如何编写事件处理函数。 4. **AJAX请求**:异步JavaScript和...

    javascript写的文字向上滚动

    在实现这个特效时,可以先创建一个基础的HTML结构,然后用CSS设置初始样式,接着编写JavaScript代码来处理滚动逻辑。记住,良好的编程习惯和模块化设计可以使代码更易于维护和扩展。 总结,"javascript写的文字向上...

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

    JavaScript 实现滚动字幕的基本思路是通过改变文本元素的位置或者CSS属性,模拟出文字滚动的效果。通常,我们会选择`&lt;marquee&gt;`标签或者通过动态修改`style`属性来达到目的。以下是一个简单的JavaScript滚动字幕示例...

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

    在这个特定的场景中,我们讨论的是如何使用JavaScript实现文本不间断上线滚动效果,这种效果常见于新闻网站的滚动公告或者滚动字幕。 要实现这种效果,首先我们需要创建一个HTML结构,包含一个可以容纳滚动文本的...

    js实现图片无缝滚动或者文字滚动

    对于文字翻滚,可以采用类似的方法,但更常用的是通过更改文本的`innerHTML`属性或使用CSS的`text-indent`属性配合定时器来实现。例如,可以创建一个包含所有文字的容器,然后每次定时改变`text-indent`值,使文字...

    javascript编写的精美的相册

    JavaScript编写的精美相册是一种利用前端技术实现的交互式图片展示工具,主要依赖于JavaScript语言进行动态效果的处理。在给定的压缩包文件中,我们可以看到与这种相册相关的多个元素,包括HTML文档(readme.htm、...

    js实现文字上下滚动效果

    然后,利用Javascript编写控制逻辑,通过定时器周期性地改变容器内的文本位置,从而实现上下滚动的效果。 具体的Javascript实现方法多种多样,可以使用原生的Javascript方法,也可以使用jQuery等库来简化操作。例如...

    jquery文本向上滚动代码带上下翻转按钮的jQuery插件

    此外,考虑到用户体验,插件可能还需要处理一些边界条件,比如在文本滚动到顶部或底部时的处理。这可能涉及到对元素位置的实时检查,以及适当的动画调整。 总的来说,"jquery文本向上滚动代码带上下翻转按钮的...

    Javascript实现信息滚动效果

    文档中提到了使用JavaScript实现向上无缝滚动的效果。在JavaScript部分,通常需要实现以下几个核心功能: - **获取DOM元素**:使用`document.getElementById()`或`document.querySelector()`等方法选取HTML中定义的...

    无缝文字滚动方案

    3. JavaScript处理:编写JS代码,获取容器内的文本,根据需要分割成多个片段,并创建定时器进行滚动操作。 4. 更新文本:定时器内部,修改容器的innerHTML或textContent属性,实现文本的滚动更新。 5. 添加交互功能...

    易语言超文本浏览框和程序交互

    例如,你可以编写一个“测试交互子程序test”,这个子程序可以响应用户的点击、滚动等操作,更新或改变浏览框的内容。以下是一些可能涉及的关键知识点: 1. **超文本浏览框组件**:在易语言的控件库中,超文本浏览...

    jQuery-实现文字无缝滚动效果.zip

    这个例子展示了如何使用jQuery实现文字无缝滚动效果的基本步骤和关键代码。实际应用中,你可以根据需要调整滚动速度、文字内容和样式。理解并掌握这些知识点,将有助于你在网页开发中创建更多吸引人的动态效果。

    图片 文本 无缝滚动

    这个技术主要依赖JavaScript(JS)来实现,通过动态更改元素的位置,给人一种内容不断滚动的感觉,但实际上只是在用户视野范围内切换元素。 在实现无缝滚动时,首先我们需要创建一个包含所有图片和文字的容器,通常...

    javascript文字横向滚动

    要实现JavaScript文字横向滚动,我们需要了解以下几个核心概念: 1. **DOM操作**:DOM(Document Object Model)是HTML或XML文档的结构化表示。在JavaScript中,我们可以通过DOM API来访问和修改文档元素,如获取...

Global site tag (gtag.js) - Google Analytics