变色的动态文字

时间：2014-07-31 12:10:06 阅读：242 评论：0 收藏：0 [点我收藏+]

标签：style blog http color java os strong io

变色的动态文字，文字一边变色一边切换的效果，简单文字颜色变换，用在网页上挺不错的效果，希望大家喜欢。

<!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>

变色的动态文字,布布扣,bubuko.com

变色的动态文字

标签：style blog http color java os strong io

原文地址：http://www.cnblogs.com/youtianxia/p/3879985.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行