用 javascript 实现文本及背景的淡入淡出效果

许多人都喜欢给页面的元素加上一点变化，以便引起浏览者的注意，而淡入淡出可以算是用的人比较多的效果了，本文向您展示的是用 javascript 实现文本及背景的淡入淡出，不过需要注意的是：一定要把握好变化的度，否则只能起到负面效应。

用 javascript 实现文本及背景的淡入淡出效果 – 示例

<script type="text/javascript">
<!--
// 说明：用 javascript 实现文本及背景的淡入淡出效果
// 整理：http://www.CodeBit.cn

	// 分离RGB颜色 0:R | 1:G | 2:B
	function parseRGB(color, type)
	{
		var start, len, result;
		len = (color.length == 4)?1:2;
		start = type * len + 1;
		result = color.substr(start, len);
		if(result.length == 1) result += result;
		return parseInt(result, 16);
	}

	// 页面元素ID，源色彩，渐变色彩，淡入淡出步数，是否背景颜色（默认文字颜色）
	function fade(id, colorSource, colorFade, fadeStep, background)
	{
		var element = document.getElementById(id);

		// 分解源色彩
		var rSource = parseRGB(colorSource, 0);	//红 R
		var bSource = parseRGB(colorSource, 1);	//绿 G
		var gSource = parseRGB(colorSource, 2);	//蓝 B

		// 分解渐变色彩
		var rFade = parseRGB(colorFade, 0);
		var bFade = parseRGB(colorFade, 1);
		var gFade = parseRGB(colorFade, 2);

		// 步数统计
		var step = 0;

		// 设置定时器
		var fadeTimer = setInterval(
			function(){

				var tmpStep = fadeStep - step;

				// 由于 floor() 计算不准确，当达到指定步数后直接赋值源色彩
				if(step < fadeStep)
				{
					with(Math)
					{
						var rStep = floor((rSource - rFade) / tmpStep);
						var bStep = floor((bSource - bFade) / tmpStep);
						var gStep = floor((gSource - gFade) / tmpStep);
					}

					rFade += rStep;
					bFade += bStep;
					gFade += bStep;

					if(background)
					{
						element.style.backgroundColor = 'rgb('+rFade+','+bFade+','+gFade+')';
					}
					else
					{
						element.style.color = 'rgb('+rFade+','+bFade+','+gFade+')';
					}
				}
				else
				{
					if(background)
					{
						element.style.backgroundColor = colorSource;
					}
					else
					{
						element.style.color = colorSource;
					}

					// 清除定时器
					clearInterval(fadeTimer);
				}
				step ++;
			},
			50
		);
	}
//-->
</script>

示例代码：

<style type="text/css">
#test {
	background:#fff;
	border:1px solid #4B7705;
	color:#3BC209;
	text-align:center;
	width:550px;
	margin:0 auto;
}
</style>

<div id="test"><h2>用javascript实现文本及背景的淡入淡出效果</h2></div>

<div>
	<input type="button" value="背景淡入" onclick="fade('test','#3BC209','#fff',5,1)" />
	<input type="button" value="文字淡入" onclick="fade('test','#fff','#3BC209',5);" />
	<input type="button" value="文字淡出" onclick="fade('test','#3BC209','#fff',5);" />
	<input type="button" value="背景淡出" onclick="fade('test','#fff','#3BC209',5,1)" />
</div>

本文介绍的效果是本站编辑在名为『 风微柳细 』的 Blog 上发现的（原文名为：《用javascript实现文本的淡入淡出效果》），编辑随后征询了原作者的意见，原作者爽快的允许了本站转载，但是由于原作者写的代码命名规则不够清晰，不便于新手学习和二次开发，因此，本站按照原作者的思路重写了代码，并加上了“背景”的淡入淡出效果，在此，本站感谢原作者对本站的支持。

如果您对原作者及其 blog 感兴趣，可以通过下面的链接访问：
http://blog.iyi.cn/hily/archives/2006/08/javascript_4.html