溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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);
}else{
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.Background=this.options.Background;
//從開始到結束，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])];
//設置對象顏色：
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);
}else{
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" >
嘻嘻!
</div>
<div id="test1" >
呵呵!
</div>
<div id="test2" >
哈哈!
</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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
