1顶

变色的动态文字

稿源：互联网 2022-05-21 00:27:44 点击： 889 撤稿纠错

自动改变颜色的动态文字，可自定义文字。

以下讨论的是和特效相关的变色的动态文字教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

脚本说明:
第一步：把如下代码加入<body>区域中
<div id="fader" style="position:absolute; top:35px; left:50px; width:600px; text-align:center;"></div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

var texts = new Array(
"1stscript",
"J a v a s c r i p t",
"F l a s h",
"A s p",
"<a href='http://www.1stscript.com' target='_top'>W e l c o m e </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

// Do Not Edit Below This Line
var colors = new Array(steps);
getFadeColors(bgcolor,fcolor,colors);
var color = 0;
var text = 0;
var step = 1;

// fade: magic fader function
function fade() {

// insert fader color into message
var text_out = texts[text].replace("{COLOR}", colors[color]); // texts should be defined in user script, e.g.: var texts = new Array("howdy");

// actually write message to document
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

// select next fader color
color += step;

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

// stop at last message if loop=false
if (!loop && text >= texts.length-1) return; // loop should be defined in user script, e.g.: var loop=true;
}

// completely faded out?
if (color == 0) {
step = 1; // traverse colors array forward to fade in again

// select next message
text += 1;
if (text == texts.length) text = 0; // loop back to first message
}

// subtle timing logic...
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;
}
// getFadeColors: fills Colors (predefined Array)
// with color hex strings fading from ColorA to ColorB

// note: Colors.length equals the number of steps to fade
function getFadeColors(ColorA, ColorB, Colors) {
len = Colors.length;

// strip '#' signs if present 
if (ColorA.charAt(0)=='#') ColorA = ColorA.substring(1);
if (ColorB.charAt(0)=='#') ColorB = ColorB.substring(1);

// substract rgb compents from hex string 
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));

// calculate size of step for each color component
var rStep = Math.round((r2 - r) / len);
var gStep = Math.round((g2 - g) / len);
var bStep = Math.round((b2 - b) / len);

// fill Colors array with fader colors
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; // make sure we finish exactly at ColorB
}

// IntToHex: converts integers between 0-255 into a two digit hex string.
function IntToHex(n) {
var result = n.toString(16);
if (result.length==1) result = "0"+result;
return result;
}

// HexToInt: converts two digit hex strings into integer.
function HexToInt(hex) {
return parseInt(hex, 16);
}

// End -->
</script>

第二步：把<body>中的内容改为：
<body onLoad="fade()">

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于变色的动态文字的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200807192757.shtml方便下次再访问哦。

·上一篇： 内容显示隐藏效果
·下一篇： 精彩变色文字效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

变色的动态文字

文章分类LIST >>返回首页

最新游戏

最新新闻