js实现DOM走马灯特效的方法

本文实例讲述了js实现DOM走马灯特效的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>走马灯的特效</title> 
    <script type="text/javascript"> 
        function scroll() { 
            //将头文件标题赋值给 tit 
            var tit = document.title; 
            //获取tit的第一个字符 
            var fir = tit.charAt(0); 
            //获取tit剩余的字符 
            var left = tit.substring(1, tit.length) 
            //将头文件标题重新赋值为 （原标题的第二个字符到最后一个字符+原标的的第一个字符） 
            document.title = left + fir; 
        } 
        //让scroll每隔2000毫秒就执行scroll()一次，从而实现走马灯的效果 
        setInterval("scroll()", 2000); 
    </script> 
</head> 
<body> 
 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

  • 浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

  • android中设置TextView/Button 走马灯(Marquee)效果示例

    在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml即可 复制代码 代码如下: <SPAN style="COLOR: #993300"><TextView android:layout_width="40px" android:layout_height="wrap_content"

  • c#.net 动态读取 走马灯代码实例分享

    前台html及js脚本: [html] 复制代码 代码如下: <div>     <table border="0" cellpadding="0" cellspacing="0">         <tr>             <td bgcolor="#CC66FF"                  style="WIDTH: 990px; HEIGHT: 5px;

  • IOS代码笔记之文字走马灯效果

    IOS代码笔记之文字走马灯效果

    本文实例为大家分享了IOS文字走马灯效果具体实现代码,供大家参考,具体内容如下 一.效果图 二.工程图  三.代码 RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.m #import "RootViewController.h" #import "UXLabel.h"

  • javascript 走马灯效果的链接提示

    走马灯效果的链接提示 鼠标放过来~ 我们 脚本学习类网站 window.onerror = null; var bName = navigator.appName; var bVer = parseInt(navigator.appVersion); var NS4 = (bName == "Netscape" && bVer >= 4); var IE4 = (bName == "Microsoft Internet Explorer" &a

  • jquery实现页面百叶窗走马灯式翻滚显示效果的方法

    本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法.分享给大家供大家参考.具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: 复制代码 代码如下: jQuery.fn.extend((     function($){         var l = 4,//卷动行数             t=5000,//卷动完一次后,隔多长时间下次开始卷动             rt=500,//每个n卷动过去的耗时             n="li",

  • 走马灯效果代码js appendChild实现的无缝滚动

    *{border:1px solid blue} a{display:block;font-size:10px}; 1,河北, 2,辽宁 3,山东, 4,河南 var t=setInterval(myfunc,1000) function myfunc(){ d.appendChild(d.firstChild)} d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,100

  • js 走马灯简单实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>走马灯</t

  • jQuery实现图片走马灯效果的原理分析

    本文实例分析了jQuery实现图片走马灯效果的原理.分享给大家供大家参考,具体如下: 这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;&qu

随机推荐