JavaScript实现标题栏文字轮播效果代码


Posted in Javascript onOctober 24, 2015

本文实例讲述了JavaScript实现标题栏文字轮播效果代码。分享给大家供大家参考,具体如下:

这里演示的JS文字轮播,显示在标题栏区域,以前个人主页时候经常见到的效果,不过现在都规范了,标题栏一般都不加入这种效果了。但是可以学习一下JS制作实现一些文字特效,运行效果后请查看标题栏。

运行效果截图如下:

JavaScript实现标题栏文字轮播效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字循环出现</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
var message = new Array();
message[0] = "欢迎光临三水点靠木";
message[1] = "这里有javascript";
message[2] = "网页特效";
message[3] = "图片和背景特效等";
message[4] = "非常多的资源";
message[5] = "你一定会有所收获的"; 
message[6] = "欢迎你再次光临";
message[7] = "";
var reps = 2;
var speed = 60;
var p = message.length;
var T = "";
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) reps = 1;
function doTheThing() {
T = message[mC];
A();
}
function A() {
s++;
if (s > 9) { s = 1;}
if (s == 1) { document.title = '|||★★★★★=====|||----- ['+T+' -----'; }
if (s == 2) { document.title = '|||=★★★★★====|||----- ['+T+' -----'; }
if (s == 3) { document.title = '|||==★★★★★===|||----- ['+T+' -----'; }
if (s == 4) { document.title = '|||===★★★★★==|||----- ['+T+' -----'; }
if (s == 5) { document.title = '|||====★★★★★=|||----- ['+T+' -----'; }
if (s == 6) { document.title = '|||=====★★★★★|||----- ['+T+' -----'; }
if (s == 7) { document.title = '|||====★★★★★=|||----- ['+T+' -----'; }
if (s == 8) { document.title = '|||===★★★★★==|||----- ['+T+' -----'; }
if (s == 9) { document.title = '|||=★★★★★===|||----- ['+T+' -----'; }
if (C < (8 * reps)) {
sT = setTimeout("A()", speed);
C++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) mC = 0;
sT = null;
doTheThing();
  }
}
doTheThing();
</script>
</body>
</html>

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

Javascript 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 #Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 #Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 #Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 #Javascript
js获取表格的行数和列数的方法
Oct 23 #Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 #Javascript
js中对函数设置默认参数值的3种方法
Oct 23 #Javascript
You might like
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php实现webservice实例
2014/11/06 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
js三种排序算法分享
2012/08/16 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
Python脚本后台运行的几种方式
2015/03/09 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
python语言的优势是什么
2020/06/17 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
会计主管岗位职责
2014/01/03 职场文书
疾病防治方案
2014/05/31 职场文书