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>走马灯</title>
    <script type="text/javascript">

var direction ='left';
   var intervalId = window.setInterval(function () {
       if (direction == 'right') {
           var title = document.title;
           var firstchar = title.charAt(0);
           var lastchar = title.substring(1, title.length);
           document.title = lastchar + firstchar;
       }
       if (direction == 'left') {
           var title = document.title;
           var firstchar = title.charAt(title.length - 1);
           var lastchar = title.substring(0, title.length - 1);
           document.title = firstchar + lastchar;
       }
   }, 2000)
    </script>
</head>
<body>
</body>
</html>

赞 (0)

相关推荐

  • 浅析js 文字滚动效果

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

  • 基于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

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

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

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

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

  • 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

  • 走马灯效果代码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实现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&q

  • 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"

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

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

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

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

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

随机推荐