颜色渐变

来源：互联网发布：mysql update select 编辑：程序博客网时间：2024/05/01 06:11

颜色渐变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

var ColorFade = Class.create();

ColorFade.prototype = {

initialize: function(idObj, options) {

var obj = document.getElementById(idObj);

this.obj = obj;

this.SetOptions(options);

var sColor = this.GetColor(this.options.startColor);

obj.style.color = this.options.startColor;

var startColor = sColor;

var endColor = this.GetColor(this.options.endColor);

this.arrStep = [this.GetStep(startColor[0], endColor[0]), this.GetStep(startColor[1], endColor[1]), this.GetStep(startColor[2], endColor[2])];

this.startColor = startColor;

this.endColor = endColor;

this.color = sColor;//当前颜色

this.timer = null;

var oFade = this;

obj.onmouseover = function(){ oFade.MouseOver() };

obj.onmouseout = function(){ oFade.MouseOut() };

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

startColor: "#671700",//定义原来的颜色

endColor: "#D8D1C5",//定义要渐变的颜色

Step: 20,//渐变级数

speed: 10//渐变速度

};

Object.extend(this.options, options || {});

//颜色渐变

Fade: function(rColor) {

var er = rColor[0], eg = rColor[1], eb = rColor[2], iStep = this.arrStep, color = this.color;

r = this.GetRGB(color[0], er, iStep[0]);

g = this.GetRGB(color[1], eg, iStep[1]);

b = this.GetRGB(color[2], eb, iStep[2]);

if (r==er && g==eg && b==eb) return;

this.SetColor(r, g, b);

var oFade = this;

this.timer = setTimeout(function(){oFade.Fade(rColor);}, this.options.speed);

//获取颜色数据

GetColor: function(sColor) {

var r, g, b

sColor = sColor.replace("#", "");

if (sColor.length > 3) {

r = Mid(sColor, 0, 2); g = Mid(sColor, 2, 2); b = Mid(sColor, 4, 2);

} else {

r = Mid(sColor, 0, 1); g = Mid(sColor, 1, 1); b = Mid(sColor, 2, 1);

r += r; g += g; b += b;

}

return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];

//设置颜色

SetColor: function(r, g, b) {

this.color = [r, g, b]; this.obj.style.color = "#" + Hex(r) + Hex(g) + Hex(b);

//onmouseover事件

MouseOver: function() {

clearTimeout(this.timer); this.Fade(this.endColor);

//onmouseout事件

MouseOut: function() {

clearTimeout(this.timer); this.Fade(this.startColor);

//获取渐变颜色数据

GetRGB: function(c, ec, iStep) {

if (c == ec) { return c; }

if (c < ec) { c += iStep; return (c > ec ? ec : c); }

else { c -= iStep; return (c < ec ? ec : c); }

//获取渐变级数

GetStep: function(start, end) {

var iStep = Math.ceil((end - start)/this.options.Step);

return (iStep >= 1 ? iStep : 1);

}

};

function Hex(i) {

if (i < 0) return "00";

else if (i > 255) return "ff";

else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }

}

function Mid(string, start, length) {

if (length) return string.substring(start, start + length);

else return string.substring(start);

}

</script>

</head>

<body>

<a href="#" id="idLink">颜色渐变效果</a>

<div id="idDiv">颜色渐变效果</div>

new ColorFade("idLink");

new ColorFade("idDiv", { startColor: "#f30", endColor: "#134" });

</script>

</body>

</html>