顏色漸變的文字_文本鏈接特效

JavaScript實現的一個特效，顏色漸變的文字，示例中的文字比較少，你可以多粘貼一些文字測試，文字越多效果越漂亮，每一行有漸變，而且每行與每行也是一種漸變。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>顏色漸變的文字</title>
<script language="javascript">
function Delta(sHex1,sHex2,iNum){
	//計算每個字的變化量
	var iHex1 = parseInt("0x"+sHex1);
	var iHex2 = parseInt("0x"+sHex2);
	return (iHex2 - iHex1)/(iNum-1);
}
function Colorful(sText,sColor1,sColor2){
	if(sText.length<=1){
		//如果只有一個字符，漸變無從談起，直接輸出并返回
		document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
		return;
	}
	//RGB三色分離，分別獲取變化的小量delta
	var fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
	var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
	var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
	var sColorR = parseInt("0x"+sColor1.substring(0,2));	
	var sColorG = parseInt("0x"+sColor1.substring(2,4));
	var sColorB = parseInt("0x"+sColor1.substring(4,6));
	for(var i=0;i<sText.length;i++){
		document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");
		/*每輸出一個字符，顏色的三個分量都相應的變化
		當字符輸出完成時，正好由sColor1變成sColor2*/
		sColorR += fDeltaR;
		sColorG += fDeltaG;
		sColorB += fDeltaB;
	}
}
Colorful("模板無憂（mb5u.com）提供各類網頁模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質量的學習型源碼下載站。","FF3300","3366FF");
</script>
</head>
<body>
</body>
</html>

所屬頻道：文本鏈接特效/更新時間：2012-12-09

[收藏][報錯][返回列表]

相關文本鏈接特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

顏色漸變的文字_文本鏈接特效

文本鏈接特效Rss訂閱特效代碼搜索

文本鏈接特效推薦

猜你也喜歡看這些