变色的动态文字

  • 变色的动态文字,文字一边变色一边切换的效果,简单文字颜色变换,用在网页上挺不错的效果,希望大家喜欢。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>石家庄油漆</TITLE>
</HEAD>
<body bgcolor="#ffffff" onLoad="fade()">
<span id="fader">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var texts = new Array(
"<font size=‘+2‘ color=‘{COLOR}‘ face=‘Arial‘><strong>源码爱好者</strong></font>",
"<font size=‘+3‘ color=‘{COLOR}‘ face=‘Arial‘><strong>J a v a s c r i p t</strong></font>",
"<font size=‘+4‘ color=‘{COLOR}‘ face=‘Arial‘><strong>F l a s h</strong></font>",
"<font size=‘+3‘ color=‘{COLOR}‘ face=‘Arial‘><strong>A s p</font>",
"<a href=‘/‘ target=‘_top‘><font size=‘+3‘ color=‘{COLOR}‘ face=‘Arial‘><strong>W e l c o m e </strong></font></a>");
var bgcolor = "#000000"; // background color, must be valid browser hex color (not color names)
var fcolor = "#FF8000";  // foreground or font color
var steps = 20; // number of steps to fade
var show = 500; // milliseconds to display message
var sleep = 30; // milliseconds to pause inbetween messages
var loop = true; // true = continue to display messages, false = stop at last message

var colors = new Array(steps);
getFadeColors(bgcolor,fcolor,colors);
var color = 0;
var text = 0;
var step = 1;

function fade() {

var text_out = texts[text].replace("{COLOR}", colors[color]); // texts should be defined in user script, e.g.: var texts = new Array("<font color=‘{COLOR}‘ sized=‘+3‘ face=‘Arial‘>howdy</font>");

if (document.all) fader.innerHTML = text_out; // document.all = IE only
if (document.layers) { document.fader.document.write(text_out); document.fader.document.close(); } // document.layers = Netscape only

color += step; 

if (color >= colors.length-1) {
step = -1; // traverse colors array backward to fade out

if (!loop && text >= texts.length-1) return;
}

if (color == 0) {
step = 1;
text += 1;
if (text == texts.length) text = 0; // loop back to first message
}

setTimeout("fade()", (color == colors.length-2 && step == -1) ? show : ((color == 1 && step == 1) ? sleep : 50)); // sleep and show should be defined in user script, e.g.: var sleep=30; var show=500;
}

function getFadeColors(ColorA, ColorB, Colors) {
len = Colors.length; 

if (ColorA.charAt(0)==‘#‘) ColorA = ColorA.substring(1);
if (ColorB.charAt(0)==‘#‘) ColorB = ColorB.substring(1);

var r = HexToInt(ColorA.substring(0,2));
var g = HexToInt(ColorA.substring(2,4));
var b = HexToInt(ColorA.substring(4,6));
var r2 = HexToInt(ColorB.substring(0,2));
var g2 = HexToInt(ColorB.substring(2,4));
var b2 = HexToInt(ColorB.substring(4,6));

var rStep = Math.round((r2 - r) / len);
var gStep = Math.round((g2 - g) / len);
var bStep = Math.round((b2 - b) / len);

for (i = 0; i < len-1; i++) {
Colors[i] = "#" + IntToHex(r) + IntToHex(g) + IntToHex(b);
r += rStep;
g += gStep;
b += bStep;
}
Colors[len-1] = ColorB;
}

function IntToHex(n) {
var result = n.toString(16);
if (result.length==1) result = "0"+result;
return result;
}

function HexToInt(hex) {
return parseInt(hex, 16);
}

//  End -->
</script></span>
</BODY>
</HTML>

变色的动态文字

时间: 2024-10-29 19:06:30

变色的动态文字的相关文章

动态文字提示一个字一个字蹦出来的 循环执行

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> .main { width: 100%; heig

网页设计-7.1设置动态文字

使用marquee标记可以将文字设置为动态滚动的效果. 语法:<marquee>滚动的文字</marquee> 说明:只要在标记之间添加要进行滚动的文字即可,而且可以在标记之间设置这些文字的字体,颜色等 <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="Edit

动态文字水印怎么做

水印是把一些标识信息嵌入到信息载体中,在不影响原载体内容使用的同时,为原作者提供识别的手段,进而防止被再次篡改,是一种保护信息安全和知识版权的有效方法. 说到水印,常见到纸的文件,一般常用 Word 或 pdf 编辑后打印所得,并且 offie 或 pdf 软件也有直接增加水印的功能. 像 Word 中增加水印很简单:菜单栏“设计”-“水印”(选择“自定义水印”),可以设置图片或文字类水印. 但同一个 word 只能设置一条水印内容,即只能是静态水印,不能动态生成,如上面文字水印的“文字”内为“

音频的使用和插入以及动态文字的使用

大多数音频是通过加载插件来播放音频的文件的,常用的是flash.但是并不是所有的浏览器都拥有同样的插件.为此和HTML4相比,HTML5中新增了audio标签.规定一种包括音频的方法. audio标签概述:只要定义播放声音文件和音频流的标准.支持三种音频格式,分别为ogg,mp3,Wav. 在HTML5中播放音频,代码如下: <audio src="song.mp3" controls="controls"> </audio> Control

基于jQuery实现文字倾斜显示代码

这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="logo"> <img src="images/frame.png" alt=

谈谈文字图片粒子化

之前写了谈谈文字图片像素化,主要是为了将文字和图片像素化后的坐标提取出来,而本篇所讲即为像素化后的粒子化过程. 先上一个简单的demo -> 粒子化demo,本篇的目的就是为了讲解怎样做这样的简单demo(大牛请无视):同时会介绍一些优秀的demo供大家参考. 主要思路 首先我们谈谈粒子化的主要思路. 像素化后(不知道怎样像素化,参考谈谈文字图片像素化),我们得到了所需图像或者文字的具体坐标,我们将它们形象地用一个个的粒子表示(这里用了圆形),得到的坐标即是粒子的最终位置.粒子的初始位置在哪里?

凡信2.0beta发布-超仿微信的开源项目 (更新了朋友圈和钱包)

凡信的第一个版本于2015年4月份发布,之后由于自己工作忙碌的原因,一直没有重大的更新内容.2016年1月份抽空做了一些更新.主要是加入了朋友圈和钱包这两块内容,以及对第一版的一些bug的修复.凡信2.0依然是基于环信IM通信云SDK开发的,当前状态下第三方通信云趋于火热,环信也这一年走过四轮共计几千万美元的融资,开发者用户也呈现几万的增长.这个项目也算是给需要集成IM云的开发者提供一个参考,给刚接触Android开发,对Android整体开发框架还很模糊同学提供一个学习的教材. 关于此次更新的

杂记 Java web

一.错误分类: web程序常见错误: 404:找不到访问的页面或资源 1)运行时,URL输入错误 2)将页面放在WEB-INF下 3)外部启动tomcat后未部署项目 500:jsp页面代码有误 二.super 和  this 1)super(参数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句) 2)this(参数):调用本类中另一种形成的构造函数(应该为构造函数中的第一条语 3)super: 它引用当前对象的直接父类中的成员(用来访问直接父类中被隐藏的父类中成员数据或函数,基类与

IReport 常见问题整理

1.   问题:IReport如何实现变量字段$F{ propertyName}赋值为一个NULL对象时不显示”null”, 而显示为空白? 解决方法:选中动态单元格,右键选择属性,在弹出对话框TextField选项卡中选中Blank when null. 思考:以往我们为IReport中变量字段赋值时会在程序或报表Textfield expression中用三目符号去判空,用IReport此功能既可以提高准确度,又可以减少工作量. 2.  问题:IReport中如果动态单元格中$F{prope