JS实现颜色梯度与渐变效果完整实例实现颜色梯度与渐变效果完整实例
本文实例讲述了JS实现颜色梯度与渐变效果的方法。分享给大家供大家参考，具体如下：
运行效果图如下：
完整实例代码如下：
<!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" content="text/html; charset=utf-8" />
<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 Map = function(array, callback, thisObject){
if(array.map){
return array.map(callback, thisObject);
}else{
var res = [];
for (var i = 0, len = array.length; i < len; i++) { res.push(callback.call(thisObject, array[i], i, array)); }
return res;
}
}
var ColorGrads = function(options){
this.SetOptions(options);
this.StartColor = this.options.StartColor;
this.EndColor = this.options.EndColor;
this.Step = Math.abs(this.options.Step);
};
ColorGrads.prototype = {
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
StartColor: "#fff",//开始颜色
EndColor: "#000",//结束颜色
Step: 20//渐变级数
};
Extend(this.options, options || {});
},
//获取渐变颜色集合
Create: function() {
var colors = [],
startColor = this.GetColor(this.StartColor),
endColor = this.GetColor(this.EndColor),
stepR = (endColor[0] - startColor[0]) / this.Step,
stepG = (endColor[1] - startColor[1]) / this.Step,
stepB = (endColor[2] - startColor[2]) / this.Step;
//生成颜色集合
for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;
}
评论0