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

javascript基本跑马灯(2)

    博客分类:
  • JS
阅读更多
<script language="javascript" type="text/javascript">

  var msg="这是使用JavaScript实现的文字跑马灯效果";
  var interval = 300;//定义setTimeout函数的时间参数,这里是0.1秒。
  var maxlen = 500;//定义跑马灯msg处于最右时的位置值。
  var space=" ";
  var seq=maxlen;//定义stext中被选取段的开始位置。
  var stext="";//实际显示它的一部分。
  var len;

  for (i=1; i<=maxlen; i++) 
    stext += space;
    stext += msg;//初始化它,实质是一段空格加上msg。
    len=stext.length;
  
  function Scroll() 
  { 
    window.status=stext.substring(seq, len);//在状态栏上显示stext从seq开始,长度为len的一部分。
    seq++;//seq每次加1,表示每次少显示一个前置空格,视觉效果就是文字提前一格。
    if(seq >= len)//如果seq比len大,意味着什么都不显示,或者说到达了左边界,则重新开始。
    {
      seq = 0;
    }
    window.setTimeout("Scroll();", interval);//递归调用,过interval毫秒后再次调用Scroll函数。
  } 
  
  Scroll();//调用Scroll函数,进入递归。
  </script>

 

 

1
0
分享到:
评论

相关推荐

    JavaScript跑马灯图

    JavaScript跑马灯图是一种常见的...通过掌握以上知识点,你就能构建一个基本的JavaScript跑马灯图。在实践中,你可以根据实际需求进行定制,如添加过渡效果、自定义动画速度、调整滚动方向等,使跑马灯更符合项目需求。

    JavaScript实现跑马灯效果

    通过以上步骤,我们就能够使用JavaScript实现一个基本的跑马灯效果。这个例子展示了JavaScript对DOM操作、事件处理和定时器的应用,这些都是JavaScript编程中非常基础且实用的技能。在实际项目中,还可以根据需求...

    经典的JavaScript跑马灯效果

    在JavaScript中,跑马灯的基本原理是利用数组存储要展示的内容,然后通过更改元素的CSS样式(如`left`或`top`)来实现内容的移动。主要涉及以下知识点: 1. **DOM操作**:首先,需要获取HTML元素,这通常通过`...

    javascript跑马灯

    首先,跑马灯的基本原理是利用JavaScript定时器(setTimeout或setInterval)来改变元素的位置,模拟出滚动的效果。这里,我们重点关注的是`Marquee.js`文件,它可能包含了实现跑马灯功能的核心代码。 1. **基本结构...

    js实现上下滚动跑马灯效果

    现在,我们通常使用JavaScript来实现更加灵活、可控的跑马灯效果。本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先,我们需要理解跑马灯效果的基本原理:它通常是通过改变元素的位置或透明度,模拟...

    js实现跑马灯效果

    通过以上步骤,我们可以实现一个基本的JavaScript跑马灯效果。具体的代码实现会因需求和设计而异,但上述原理和方法提供了一个通用的框架。在实际项目中,可能还需要考虑性能优化、用户体验等因素,比如使用`...

    HTML跑马灯

    1. **基本跑马灯**: ```html 示例文本 ``` - 这是最简单的跑马灯示例,默认为从右向左滚动。 2. **指定滚动方向**: ```html 向右滚动 ``` - 设置了`direction`属性为`right`,使跑马灯向右滚动。 3. **...

    跑马灯简单实现

    对于新手来说,了解跑马灯的基本原理和实现方法是提升编程技能的良好起点。下面我们将深入探讨跑马灯的实现原理和常见技术。 1. **实现原理**: 跑马灯的核心是模拟文本在固定区域内的滚动。基本思路是将文本分成...

    jquery跑马灯上下左右

    2. **左右方向的跑马灯** 左右跑马灯更常见于图片轮播。通过改变元素的`left`或`right`属性,可以实现内容从左侧滑入右侧,右侧滑出左侧的效果。使用`animate()`方法配合`margin-left`或`margin-right`属性变化,...

    跑马灯大合集(上下左右)

    jQuery 跑马灯实现的基本原理是通过改变元素的位置或透明度来模拟滚动效果。以下是一些关键知识点: 1. **jQuery选择器**:jQuery 提供了强大的选择器系统,如 ID 选择器 (#id),类选择器 (.class),以及属性选择器...

    jQuery无缝滚动跑马灯效果

    通过以上步骤,我们可以创建一个基本的jQuery无缝滚动跑马灯效果。这个过程涉及到DOM操作、CSS布局、JavaScript事件处理和动画效果的实现,是网页动态效果设计中的重要技能。同时,还可以根据实际需求进行定制,比如...

    网页标题栏跑马灯特效

    跑马灯特效的核心是通过JavaScript定时器不断改变窗口状态栏(`window.status`)中的文本内容来实现。具体来说,主要涉及到以下几个关键步骤: 1. **初始化状态**: - 定义初始位置`POSITION`。 - 设置延迟时间`...

    跑马灯效果

    跑马灯信息2 跑马灯信息3 ``` ```css .marquee { width: 100%; overflow: hidden; white-space: nowrap; animation: scroll 5s linear infinite; } @keyframes scroll { 0% { transform: translateX(0); }...

    跑马灯图片循环

    总的来说,跑马灯图片循环是一种结合了前端基本技术的动态展示方式,不仅需要理解HTML和CSS的布局与样式,还需要掌握JavaScript的事件处理和动画控制。通过实践和调试,你可以创造出更富吸引力的跑马灯效果。

    图文滚动jQuery跑马灯代码.zip

    【标题】:“图文滚动jQuery跑马灯代码.zip”是一个包含jQuery跑马灯特效的压缩包,主要用于网页中的...通过学习和应用这个代码,开发者可以掌握如何使用jQuery进行动画操作,并了解跑马灯特效的基本原理和实现技巧。

    基于swiper的3d跑马灯轮播图,原生js

    总结来说,基于swiper的3D跑马灯轮播图是一项结合了JavaScript、CSS3和可能的React技术的前端开发技能,它提供了高度定制化和交互性的用户体验,特别适合展示动态内容和复杂信息。无论是用于产品展示、新闻滚动还是...

    推送跑马灯效果不错可用

    首先,我们要理解跑马灯效果的基本概念。跑马灯,也称为走马灯或滚动公告,源自早期的电子显示屏,通过循环滚动显示文字或图像来传达信息。在数字时代,这种效果通常通过CSS(层叠样式表)和JavaScript实现。CSS用于...

    跑马灯

    以上就是关于跑马灯的一些基本知识和实现要点,涵盖了从硬件到软件的各种技术细节。无论是电子爱好者还是软件开发者,掌握这些知识都可以帮助你创建出各种各样的跑马灯效果。在实际项目中,可以根据具体需求选择合适...

    强大的jQuery文字和图片跑马灯特效.zip

    综上所述,通过理解jQuery的基本原理,结合HTML、CSS和JavaScript,我们可以创建出强大的文字和图片跑马灯特效。实践中,根据具体需求进行调整和优化,可以使这一特效更加符合网站的整体风格,提升用户体验。

    各种跑马灯

    jQuery 是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画效果,因此是实现跑马灯效果的常用工具。 jQuery跑马灯效果主要分为两类:文本跑马灯和图片轮播。文本跑马灯通常用于显示滚动的...

Global site tag (gtag.js) - Google Analytics