Java Script 颜色梯度和渐变效果_页面背景特效

JavaScript 颜色梯度和渐变效果,您可以先修改部分代码再运行.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>JavaScript 颜色梯度和渐变效果</title>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
	return destination;
}

var CurrentStyle = function(element){
	return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

var Bind = function(object, fun) {
	var args = Array.prototype.slice.call(arguments).slice(2);
	return function() {
		return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
	}
}

//渐变对象
var ColorTrans = function(obj, options){
	
	this._obj = $(obj);
	this._timer = null;//定时器
	this._index = 0;//索引
	this._colors = [];//颜色集合
	this._grads = new ColorGrads();
	
	this.SetOptions(options);
	
	this.Speed = Math.abs(this.options.Speed);
	this.CssColor = this.options.CssColor;
	
	this._startColor = this.options.StartColor || CurrentStyle(this._obj)[this.CssColor];
	this._endColor = this.options.EndColor;
	this._step = Math.abs(this.options.Step);
	
	this.Reset();
	this.SetColor();
};
ColorTrans.prototype = {
  //设置默认属性
  SetOptions: function(options) {
	this.options = {//默认值
		StartColor:	"",//开始颜色
		EndColor:	"#000",//结束颜色
		Step:		20,//渐变级数
		Speed:		20,//渐变速度
		CssColor:	"color"//设置属性（Scripting属性）
	};
    Extend(this.options, options || {});
  },
  //重设颜色集合
  Reset: function(color) {
	//修改颜色后必须重新获取颜色集合
	color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
	//设置属性
	this._grads.StartColor = this._startColor = color.StartColor;
	this._grads.EndColor = this._endColor = color.EndColor;
	this._grads.Step = this._step = color.Step;
	//获取颜色集合
	this._colors = this._grads.Create();
	this._index = 0;
  },
  //颜色渐入
  FadeIn: function() {
	this.Stop(); this._index++; this.SetColor();
	if(this._index < this._colors.length - 1){
		this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
	}
  },
  //颜色渐出
  FadeOut: function() {
	this.Stop(); this._index--; this.SetColor();
	if(this._index > 0){
		this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
	}
  },
  //颜色设置
  SetColor: function() {
	var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
	this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
  },
  //停止
  Stop: function() {
	clearTimeout(this._timer);
  }
};

</script>
</head>
<body>
<style type="text/css">
#idGrads{}
#idGrads div{ font-size:0;height:1px;}
</style>
<div id="idGrads"> </div>
<script>
var forEach = function(array, callback, thisObject){
	if(array.forEach){
		array.forEach(callback, thisObject);
	}else{
		for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
	}
}

var colors = new ColorGrads({ StartColor: "#fff", EndColor: "rgb(20,127,0)" }).Create();

forEach(colors.concat().concat(colors.reverse()), function(x){
	$("idGrads").innerHTML += "<div style=\"background-color:"+"rgb(" + x[0] + "," + x[1] + "," + x[2] + ");\"></div>";
})
</script>
<Br />
<Br />
<style type="text/css">
#idMenu{ background:#DBDBDB;text-align:center;line-height:25px; table-layout:fixed;}
#idMenu td{ cursor:pointer;}
</style>
<table id="idMenu" width="600" border="0" cellspacing="5" cellpadding="0">
	<tr>
		<td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html'">Cropper</td>
		<td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html'">Tween</td>
		<td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html'">Slider</td>
		<td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html'">Resize</td>
		<td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html'">Drag</td>
	</tr>
</table>
<script>
forEach($("idMenu").getElementsByTagName("td"), function(x, i){
	var ct1 = new ColorTrans(x, { StartColor: "#666", EndColor: "#fff" });
	var ct2 = new ColorTrans(x, { StartColor: "#f6f6f6", EndColor: "rgb(20,150,0)", CssColor: "backgroundColor" });
	
	x.onmouseover = function(){ ct1.FadeIn(); ct2.FadeIn(); }
	x.onmouseout = function(){ ct1.FadeOut(); ct2.FadeOut(); }
})
</script>
<Br />
<Br />
<div id="idRandom" style="padding:10px;color:#fff; background-color:#CCC;">点击随机换颜色</div>
<script>
var ctRandom = new ColorTrans("idRandom", { EndColor: "#CCC", CssColor: "backgroundColor" })

$("idRandom").onclick = function(){
	var rgb = Map([1,1,1], function(){ return Math.floor((Math.random() * 255)); } );
	ctRandom.Reset({ StartColor: this.style.backgroundColor, EndColor: "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")" })
	ctRandom.FadeIn();
}
</script>
</body>
</html>

所属频道：页面背景特效/更新时间：2012-11-23

[收藏][报错][返回列表]

Java Script 颜色梯度和渐变效果_页面背景特效

页面背景特效Rss订阅特效代码搜索

页面背景特效推荐

猜你也喜欢看这些