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

本文描述了用JavaScript实现的鼠标响应颜色渐变效果。分享给大家参考，如下：

运行渲染如下：

完整的代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title颜色渐变实例/title脚本类型=' text/JavaScript '/////基础类库：//1.获取对象：函数$(id){ 0返回id=='string '的类型？文件。getelementbyid(id): id；}//2.添加事件监听：函数addEventHandler(otargett，sEventType，fnHandler){ if(otargett。addeventlistener){ otargett。addeventlistener(sEventType，fnHandler，false)；} else if(otargett。attachevent){ otargett。attachevent(' on ' sEventType，fnHandler)；} else { Otarget[' on ' SeventType]=fnHandler；} }//3.自定'义产生对象'类：var Class={ create : function(){ return function(){ this。初始化。应用(这个，参数)；} } }//4.对象属性合并：对象。extend=函数(目标，源){ for(源中的定义变量属性){目标[属性]=源[属性]；}返回目的地；}////-var颜色渐变=Class .create()；colorFade.prototype={ //1 .类的初始化：initialize:function(obj，options){ this ._ obj=$(obj)；//当前要改变颜色的对象这个_ timer=null//计时器这个。设置选项(选项)；//传入的数组参数这个步骤=数学。ABS(这个。选项。步骤)；这个。速度=数学。ABS(这个。选项。速度)；//这个_ colorArr:用来寄存当前颜色的共和党信息这个StartColorArr=这个_ colorar=这个。getcolorar(这个。选项。start color)；这个endcolorar=这个。getcolorar(这个。选项。end color)；这个。背景=这个。选项。背景；//从开始到结束，r.g.b三种原色渐变的梯度值（即，每次渐变要增加/减少的值)。这个. stepAddValueArr=[this。getcoloradvalue(这个.startcolorar[0]，这个endcolorar[0])，这。getcoloradvalue(这个.startcolorar[1]，这个endcolorar[1])，这个。getcoloradvalue(这个.startcolorar[2]，这个endcolorar[2])]；//设置对象颜色：这个_ setObjColor=这个.背景？函数{这个._ obj。风格。背景颜色=Scorr} :功能(Scorr这._ obj。风格。color=Scorr};这个. SetObjColor _ this。选项。startColor)；//为对象添加事件：var oThis=thisaddEventHandler(这个. obj，' mouseover '，function(){ oThis .褪色endcolorrar })；addEventHandler(这个. obj，' mouseout '，function(){ oThis .褪色. startcolorar })；}, /* 2.对象属性初始化：*/setoptions :函数(选项){ this。options={ start color : ' # 000000 '，EndColor: '#ffffff '，Steps: 20，//渐变次数Speed: 20，//渐变速度，即每隔多少（速度)毫秒渐变一次Background: true//是否为对象背景渐变。 } //合并属性：Object.extend(this.options，options | | { })；}, /* 3.得到某个颜色的' r.g.b '信息数组：斯科尔斯：被计算的颜色值，格式为#ccc000 '。返回的一个数组。

*/GetColorar:函数(Scor){ var Curcolor=Scor。替换(' # '，' ')；var r，g，b；if(curColor.length3){//六位值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=rg=gb=b} //返回"十六进制"数据的"十进制"值：返回[parsent(r，16)，parsent(g，16)，parsent(b，16)]；}, /* 4.得到当前原色值（英国)渐变的梯度值sRGB:开始颜色值（十进制)eRGB:结束的颜色值（十进制)*/getcoloradvalue :函数(sRGB，ErgB){ var step value=math。ABS((ErgB-sRGB)/今年.步骤);if(步长值0步长值1){步长值=1；}返回parsent(step value)；}, /* 5.得到当前渐变颜色的' r.g.b '信息数组startColor:开始的颜色，格式为# CCC 000 '；iStep:当前渐变的级数（即当前渐变的次数)。返回颜色值，如#fff000。*/getstepcolor :函数(sColor，eColor，addValue){ if(sColor==eColor){ return sColor；} else if(score color){ return(score addvalue)eColor？ecolor :(Scolor AddValue)；} else if(score color){ return(Scorer-AddValue)eColor？ecolor :(Scorr-AddValue)；} }, /* 6.开始渐变：endColorArr:目标颜色，为共和党信息数组*/fade :函数(endcolorar){ cleartime out(这_ timer)；var er=endcolorar[0]，eg=endcolorar[1]，EB=endcolorar[2]，r=this.getStepColor(this ._ colorar[0]，呃，这个. stepAddValueArr[0])，g=this.getStepColor(this ._ colorar[1]，例如，这个. stepAddValueArr[1])，b=this.getStepColor(this ._ colorar[2]，eb，这个_ stepAddValueArr[2])；这个_ colorar=[r，g，b]；这个_ _ SetbjColor(' # ' Hex(r)Hex(g)Hex(b))；if(r！=er||g！=eg||b！=EB){ var Othis=this；没什么_ timer=setTimeout(function(){ Othis .fade(endcolorar)}，oThis .速度);} } }//返回16进制数函数Hex(i) { if (i 0)返回' 00 ';否则if (i 255)返回ff '；else { //十进制转成十六进制：var str=' 0 ' I . ToString(16)；返回字符串。子串。长度-2)；} }/script/head dydiv id=' test ' style=' height :40 px；宽度宽度：200像素'边框：1像素纯红；'嘻嘻！/div div id=' test1 ' style=' height :40 px；宽度宽度：200像素'边框：1像素纯红；'呵呵！/div div id=' test2 ' style=' height :40 px；宽度宽度：200像素'边框：1像素纯红；'哈哈！/div/body脚本类型=' text/JavaScript ' var color fade 01=new color fade(' test '，{StartColor:'#000000 '，EndColor:'#8AD4FF '，background : true })；var颜色渐变02=新颜色渐变(' test '，{StartColor:'#8AD4FF '，EndColor:'#000000 '，background : false })；var颜色渐变03=新颜色渐变(' test1 '，{StartColor:'#000000 '，EndColor:'#8AD4FF '，背景： true })；var颜色渐变04=新颜色渐变(' test1 '，{StartColor:'#8AD4FF '，EndColor:'#000000 '，background : false })；var颜色渐变05=新颜色渐变('测试2 '，{StartColor:'#000000 '，EndColor:'#8AD4FF '，背景： true })；var颜色渐变06=新颜色渐变(' test 2 '，{StartColor:'#8AD4FF '，EndColor:'#000000 '，background : false })；/script/htmlPS:这里再为大家推荐几款网页元素样式相关工具供大家参考使用：

在线特效文本/彩色文本生成工具：http://tools.jb51.net/aideddesign/colortext

火狐的线性渐变在线调试工具：http://tools.jb51.net/aideddesign/moz_LinearGradients

webkit内核safari/Chrome的线性渐变在线调试工具http://tools.jb51.net/aideddesign/webkit_LinearGradients

关于JavaScript的更多信息，请参考本网站的主题：《javascript面向对象入门教程》、《JavaScript事件相关操作与技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。