JavaScript实现的鼠标响应颜色渐变效果完整实例

本文实例讲述了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" 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:这里再为大家推荐几款网页元素样式相关工具供大家参考使用:

在线特效文字/彩色文字生成工具:

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程序设计有所帮助。

以上是 JavaScript实现的鼠标响应颜色渐变效果完整实例 的全部内容, 来源链接: utcz.com/z/332045.html

回到顶部