English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
この記事は、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" content="text/html; charset=utf-8" />
<title>色のグラデーション例</title>
<script type="text/javascript">
//--------------------------------------------------------------------
//基本ライブラリ：
//1.オブジェクトを取得：
function $(id) {
return typeof id == 'string'? document.getElementById(id): id;
}
//2.添加事件监听：
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on"+sEventType, fnHandler);
});
oTarget["on"+sEventType] = fnHandler;
}
}
//3.自定"义产生对象"类：
var Class = {
Create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
//4.对象属性合并：
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade = Class.Create();
colorFade.prototype = {
//1.类的初始化：
initialize: function(obj, options) {
this._obj = $(obj);//当前要改变颜色的对象。
this._timer = null;//计时器。
this.SetOptions(options);//传入的数组参数。
this.Steps = Math.abs(this.options.Steps);
this.Speed = Math.abs(this.options.Speed);
//this._colorArr: 用以寄存当前颜色的r.g.b信息。
this.StartColorArr = this._colorArr = this.getColorArr(this.options.StartColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
//this.Background=this.options.Background;/開始から終了まで、r.g.bの3つの原色が徐々に変化する梯子値（つまり、次の変化ごとに増加
減少する値）。1],this.EndColorArr[1]);this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2]);
//オブジェクトの色を設定：
this._setObjColor=this.Background?function(sColor){
this._obj.style.backgroundColor=sColor;
}:function(sColor){
this._obj.style.color=sColor;
});
this._setObjColor(this.options.StartColor);
//オブジェクトにイベントを追加：
var oThis=this;
addEventHandler(this._obj,"mouseover",
function(){
oThis.Fade(oThis.EndColorArr);
}
);
addEventHandler(this._obj,"mouseout",function(){
oThis.Fade(oThis.StartColorArr);
});
},
/*
2.オブジェクト属性の初期化：
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,//変化する回数
Speed: 20,//徐々に変化する速度、つまりどれくらいの（Speed）ミリ秒ごとに変化するか。
Background: true//オブジェクトの背景が徐々に変化するかどうか。
}
//属性の統合：
Object.extend(this.options, options||{});
},
/*
3.得到某个颜色的"r.g.b"信息数组：
sColor：被计算的颜色值，格式为"#ccc000"。
返回的一个数组。
*/
getColorArr: function(sColor) {
var curColor = sColor.replace("#", "");
var r, g, b;
if(curColor.length >3){//六位值
r = curColor.substr(0,2);
g = curColor.substr(2,2);
b = curColor.substr(4,2);
});
r = curColor.substr(0,1);
g = curColor.substr(1,1);
b = curColor.substr(2,1);
r+=r;
g+=g;
b+=b;
}
//返回“十六进制”数据的“十进制”值：
return [parseInt(r,16), parseInt(g,16), parseInt(b,16);
},
/*
4.得到当前原色值（r.g.b）渐变的梯度值。
sRGB：开始颜色值（十进制）
eRGB：结束的颜色值（十进制）
*/
getColorAddValue: function(sRGB, eRGB) {
var stepValue = Math.abs((eRGB-sRGB)/this.Steps);
if(stepValue > 0 && stepValue <1){
stepValue =1;
}
return parseInt(stepValue);
},
/*
5.得到当前渐变颜色的"r.g.b"信息数组。
startColor: 开始的颜色，格式为"#ccc000"；
iStep: 当前渐变的级数（即当前渐变的次数）。
返回颜色值，如 #fff000。
*/
getStepColor: function(sColor, eColor, addValue) {
if(sColor == eColor) {
return sColor;
} else if(sColor < eColor) {
return (sColor+addValue) > eColor?eColor: (sColor+addValue);
} else if(sColor > eColor) {
return (sColor-addValue) < eColor?eColor: (sColor-addValue);
}
},
/*
6.开始渐变：
endColorArr: 目标颜色，为r.g.b信息数组。
*/
Fade: function(endColorArr) {
clearTimeout(this._timer);}}
var er=endColorArr[0],
eg=endColorArr[1],
eb=endColorArr[2],
r=this.getStepColor(this._colorArr[0],er,this._stepAddValueArr[0]),
g=this.getStepColor(this._colorArr[1],eg,this._stepAddValueArr[1]),
b=this.getStepColor(this._colorArr[2],eb,this._stepAddValueArr[2]);
this._colorArr=[r,g,b];
this._setObjColor("#"+Hex(r) + Hex(g) + Hex(b));
if(r!=er||g!=eg||b!=eb){
var oThis=this;
oThis._timer=setTimeout(function(){oThis.Fade(endColorArr)},oThis.Speed);
}
}
}
//を 返す16進数
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);
}
}
</script>
</head>
<body>
<div id="test" style="高さ:40ピクセル;幅:200ピクセル;ボーダー:1ピクセル solid レッド;">
ヒヒ!
</div>
<div id="test1"スタイル="高さ:40ピクセル;幅:200ピクセル;ボーダー:1ピクセル solid レッド;">
ヘヘ!
</div>
<div id="test2"スタイル="高さ:40ピクセル;幅:200ピクセル;ボーダー:1ピクセル solid レッド;">
ハハ!
</div>
</body>
<script type="text/javascript">
var colorFade01=new colorFade("test",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade02=new colorFade("test",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade03=new colorFade("test1"{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade04=new colorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade05=new colorFade("test2"{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade06=new colorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
</script>
</html>
PS：以下のウェブページ要素スタイル関連ツールを紹介します。ご参考にしてください：
オンラインエフェクトテキスト/カラーテキスト生成ツール：
http://tools.jb51.net/aideddesign/colortext
FirefoxのLinear Gradients（線形グラデーション）オンラインデバッグツール：
http://tools.jb51.net/aideddesign/moz_LinearGradients
webkitカーネルsafari/ChromeのLinear Gradients（線形グラデーション）オンラインデバッグツール
http://tools.jb51.net/aideddesign/webkit_LinearGradients
JavaScriptに関するさらに多くの情報は、このサイトの特集でご覧いただけます：《javascriptオブジェクト指向入門ガイド》、《JavaScriptイベント関連操作と技術全解説》、《JavaScript効果と技術の総まとめ》、《JavaScriptアニメーションと技術の集約》、《JavaScriptエラートラブルシューティングと技術のまとめ》、《JavaScriptデータ構造とアルゴリズムの技術まとめ》および《JavaScript数学演算の使用法まとめ》
この記事で述べたことが皆様のJavaScriptプログラムデザインに役立つことを願っています。
声明：この記事の内容はインターネットから提供され、著作権者に帰属します。インターネットユーザーが自発的に提供し、アップロードしたものであり、このサイトは所有権を持ちません。また、人工編集は行われておらず、関連する法的責任も負いません。著作権侵害が疑われる内容が見つかった場合は、メールで以下のアドレスまでお知らせください：notice#oldtoolbag.com（メール送信時は、#を@に置き換えてください。届出を行い、関連する証拠を提供してください。一旦確認がつき、このサイトは侵害が疑われるコンテンツをすぐに削除します。）