本文實例講述了JavaScript實現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果。分享給大家供大家參考，具體如下：
運行效果圖如下：
完整代碼如下：
<!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">//--------------------------------------------------------------------//基礎(chǔ)類庫://1.獲取對象：function $(id){ return typeof id=='string'?document.getElementById(id):id; }//2.添加事件監(jiān)聽：function addEventHandler(oTarget,sEventType,fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); }else if(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,fnHandler); }else{ oTarget["on"+sEventType]=fnHandler; } }//3.自定"義產(chǎn)生對象"類：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);//當(dāng)前要改變顏色的對象。 this._timer=null;//計時器。 this.SetOptions(options);//傳入的數(shù)組參數(shù)。 this.Steps=Math.abs(this.options.Steps); this.Speed=Math.abs(this.options.Speed); //this._colorArr:用來寄存當(dāng)前顏色的r.g.b信息。 this.StartColorArr=this._colorArr=this.getColorArr(this.options.StartColor); this.EndColorArr=this.getColorArr(this.options.EndColor); this.Background=this.options.Background; //從開始到結(jié)束，r.g.b三種原色漸變的梯度值（即，每次漸變要增加/減少的值）。 this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[0],this.EndColorArr[0]),this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]),this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2])]; //設(shè)置對象顏色： 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,//漸變次數(shù) Speed: 20,//漸變速度，即每隔多少（Speed）毫秒漸變一次。 Background: true//是否為對象背景漸變。 } //合并屬性： Object.extend(this.options,options||{}); }, /* 3.得到某個顏色的"r.g.b"信息數(shù)組： sColor：被計算的顏色值，格式為"#ccc000"。 返回的一個數(shù)組。 */ 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); }else{ r=curColor.substr(0,1); g=curColor.substr(1,1); b=curColor.substr(2,1); r+=r; g+=g; b+=b; } //返回“十六進(jìn)制”數(shù)據(jù)的“十進(jìn)制”值： return [parseInt(r,16),parseInt(g,16),parseInt(b,16)]; }, /* 4.得到當(dāng)前原色值（r.g.b）漸變的梯度值。 sRGB：開始顏色值（十進(jìn)制） eRGB：結(jié)束的顏色值（十進(jìn)制） */ getColorAddValue:function(sRGB,eRGB){ var stepValue=Math.abs((eRGB-sRGB)/this.Steps); if(stepValue>0&&stepValue<1){ stepValue=1; } return parseInt(stepValue); }, /* 5.得到當(dāng)前漸變顏色的"r.g.b"信息數(shù)組。 startColor:開始的顏色，格式為"#ccc000"； iStep:當(dāng)前漸變的級數(shù)（即當(dāng)前漸變的次數(shù)）。 返回顏色值，如 #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:目標(biāo)顏色，為r.g.b信息數(shù)組。 */ 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進(jìn)制數(shù)function Hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else { //十進(jìn)制 轉(zhuǎn)成 十六進(jìn)制： var str = "0" + i.toString(16); return str.substring(str.length - 2); }}</script></head><body><div id="test" style="height:40px;width:200px;border:1px solid red;"> 嘻嘻!</div><div id="test1" style="height:40px;width:200px;border:1px solid red;"> 呵呵!</div><div id="test2" style="height:40px;width:200px;border:1px solid red;"> 哈哈!</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：這里再為大家推薦幾款網(wǎng)頁元素樣式相關(guān)工具供大家參考使用：
在線特效文字/彩色文字生成工具：
http://tools.VeVB.COm/aideddesign/colortext
Firefox的Linear Gradients (線性漸變)在線調(diào)試工具：
http://tools.VeVB.COm/aideddesign/moz_LinearGradients
webkit內(nèi)核safari/Chrome的Linear Gradients(線性漸變)在線調(diào)試工具
http://tools.VeVB.COm/aideddesign/webkit_LinearGradients
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
