漂亮！射流研究…实现颜色渐变效果

今天做组织机构，要分级别显示颜色，自己计算半天也没算出颜色渐变的方法，出来总是花里胡哨的难看的不要不要的，所以查了一下，找到一个射流研究…代码，试了试，很完美哦！

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head dyscript src=' http : js/jquery-1。11 .3 .js '/script script src=' http : js/swiper-3。3 .1 .jquery。量滴js '/script脚本类型=' text/JavaScript '/*//startColor:开始颜色hex //endColor:结束颜色十六进制//step:几个阶级（几步)*/函数gradientColor(startColor，endColor，step){ startRGB=this。color GB(startColor)；//转换为rgb数组模式startR=startRGb[0]；startG=startRGb[1]；startB=startRGB[2]；end RGb=this。colorgb(结束颜色)；endR=endRGB[0]；endg=endRGB[1]；endB=endRGB[2]；sR=(ENdr-startR)/step；//总差值sG=(endg-startG)/步；sB=(endB-startB)/step；var colorar=[]；for(var I=0；ist API){//计算每一步的十六进制值var hex=这个。color hex(' RGB(' ParSeint((sR * I StartR))')，' parseInt((sG*i startG))'，' ParSeint((sB * I StartB))')')；colorArr.push(十六进制);}返回colorar }//将十六进制表示方式转换为rgb表示方式（这里返回rgb数组模式)gradientcolor。原型。color GB=function(scolor){ var reg=/^#([0-9a-fa-f]{3}|[0-9a-fa-f]{6})$/；var Scorr=Scorr。ToLowerCase()；if(Scor reg。测试(Scor)){ if(Scor。length===4){ var Swootew=' # '；for(var I=1；i4；I=1){ Swootew=Scorer。切片(一，一1).concat(Scor。切片(I，I ^ 1))；}鄙视者=鄙视者；} //处理六位的颜色值var SCorChange=[]；for(var I=1；i7；I=2){ ScorChange。push(ParSeint('0x ' Scor。切片(I，I ^ 2))；}返回sColorChange } else { return Scorr} };//将rgb表示方式转换为十六进制表示方式gradientcolor。原型。color hex=函数(RGB){ var _ this=RGB；var reg=/^#([0-9a-fa-f]{3}|[0-9a-fa-f]{6})$/；if(/^(rgb|RGB)/.test(_ this)){ var AColor=_ this。替换(/(？(|)|rgb|RGB)*/g ' ').split('，')；var strHex=' # for(var I=0；var hex=Number .toString(16)；hex=hex10？0 ' '十六进制：十六进制；//保证每个rgb的值为2位if(hex===' 0 '){ hex=hex；} strHex=hex} if(strHex.length！==7){ strHex=_ this；}返回strHex} else if(reg。test(_ this)){ var NuM=_ this。替换(/#/，' ').拆分("");if(NuM。length===6){ return _ this；} else if(NumM。length===3){ var NumHex=' # '；for(var I=0；ianum . lengthi=1){ NumHex=(NuMA[I]NuMA[I])；}返回numHex} } else { return _ this} } var渐变=新渐变颜色(' e # 82400 '，' #8ae800 '，10)；console.log(渐变);//控制台输出警报（梯度);for(var I=0；igradient . LengiI){ var html=' div class=' mmm ' I ' ' ' I '/div '；$(“正文”).追加(htmlsconsole。log($(' mmm ' I))；console.log(渐变[I])；$('.嗯css(')背景色，渐变[I])；}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。