1、原理分析：首先截取字符串的最后一位用Last表示，再截取剩余字符串用Rest表示，拼接字符串Last + Rest, 此事字符串是不会动的，还需要一个函数setInterval(javascript方法，时间)，这个函数是每隔一段时间执行一些动作，执行什么动作，取决于函数中JavaScript的方法，本例中，每隔一段时间就取截取字符，然后拼接起来，因此字符串动起来。

2、简单示例

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title>欢迎新同学到来</title>

     <script type="text/javascript">

         function scroll() {

             var title = document.title;

             var leftstr = title.charAt();

             var rightstr = title.substring(, title.length);

             document.title = rightstr + leftstr;

         }

         setInterval("scroll()", );

     </script>

 </head>

 <body>

 </body>

 </html>

运行结果：

3、复杂的走马灯

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>欢迎新同事到来！</title>

     <script type="text/javascript">

         var leftStr;

         var rightStr;

         var getDirection;

         function strMove(direction) {

             this.getDirection = direction;

             var title = document.title;

             getTitleStr(title);

         }

         //拼接向左和向右的字符串

         function getTitleStr(title) {

             if (getDirection == "left") {

                 leftStr = title.charAt();

                 rightStr = title.substring(, title.length);

                 document.title = rightStr + leftStr;

             } else {

                 leftStr = title.charAt(title.length - );

                 rightStr = title.substring(, title.length - );

                 document.title = leftStr + rightStr;

             }

         }

         //停止滚动

         function stopScoll() {

             if (getDirection == "left")

                 clearInterval(intervalLeftId);

             else

                 clearInterval(intervalRightId);

         }

     </script>

 </head>

 <body>

     <input type="button" value="向左滚动" onclick="intervalLeftId = setInterval('strMove(\'left\')',500)" />

     <input type="button" value="停止滚动" onclick = "stopScoll()" />

     <input type="button" value="向右滚动" onclick = "intervalRightId = setInterval('strMove(\'right\')',500)" />

 </body>

 </html>

运行结果：

JavaScript 之 走马灯的更多相关文章

  1. 横纵方向走马灯滚动，纯javascript代码

    <body onload="beginmarquee()"> <table width="1024" border="0" ...

  2. javascript走马灯的效果(文档标题文字滚动)

    做一些网站的时候,文档标题会滚动,这个效果是走马灯的效果. <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. 小白关于走马灯幻灯片的javascript代码分析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. div+css+javascript 走马灯图片轮换显示

    效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. javascript实例备忘

    一,javascript动态显示: 如显示效果上图所示: 如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细:代码如下:<head><title></title> ...

  6. setTimeout()与setInterval()——走马灯效果

    JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout ...

  7. 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）

    -->目录导航 一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. ...

  8. css3 transition 和 animation实现走马灯

    这段时间在做一个App,H5的开发.页面上有公告 以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...

  9. Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

随机推荐

  1. Windows菜单

    目录 第1章 Windows菜单    1 1.1 窗口菜单和弹出菜单    1 1.2 使用SetMenu    2 1.3 使用TrackPopupMenu    4 第1章 Windows菜单 ...

  2. android:layout_weight的真实含义

    首先声明只有在Linearlayout中,该属性才有效.之所以android:layout_weight会引起争议, 是因为在设置该属性的同时,设置android:layout_width为wrap_ ...

  3. Cmd Markdown 高阶语法手册

    『Cmd 技术渲染的沙箱页面,点击此处编写自己的文档』 Cmd Markdown 高阶语法手册 1. 内容目录 在段落中填写 [TOC] 以显示全文内容的目录结构. [TOC] 2. 标签分类 在编辑 ...

  4. DSP EPWM学习笔记1 - EPWM定时中断

    DSP EPWM学习笔记1 - EPWM定时中断 彭会锋 EPWM模块组成 EPWM有7个子模块组成:时间基准 TB.比较功能 CC.动作限定 AQ.死区产生 DB.斩波控制 PC.故障捕获 TZ.事 ...

  5. 例子:使用C++中的this

    在C++中很多的东西都传值的,. C++中的对象之间的copy是传值的 , 他不想java那样,对象之间传递的引用 , 或者说是java对指针进行了封装 , 禁止了一些不安全的操作 对于C++而言 , ...

  6. Java 基础知识点（必知必会其一）

    如何将字符串转换为数字? package Day_2; /** * @author Administrator * 功能: 如何将字符串转换为数字? */ public class StringToI ...

  7. App crash 报错 'NSUnknownKeyException'

    报错: *** Terminating app due to uncaught exception , reason: '[<NSObject 0x6e36ae0> setValue:fo ...

  8. SAP本地文件策略(导EXCEL选择拒绝后处理)

    导出EXCEL意外选择了拒绝+记住选择,这样的话在本地电脑就导不出文件了,如下图: 解决办法有2个: 1,修改导出文件的本地策略 :Alt+F12 ->选项->安全性->安全设置-& ...

  9. PowerDesigner中导出设计说明文档

    点击下图的新建按钮,新建一个导出内容的模板 模板设计界面分为2栏,左边是可选的模板内容,右侧是模板,双击左侧条目会添加到右侧,最后生成的文件中就有此项内容. 已经添加到右侧的内容可以编辑,双击右侧的条 ...

  10. java 分析方法调用过程

    StackTraceElement[] s = new Exception().getStackTrace(); for(int i=0;i<s.length;i++) System.out.p ...