漂亮! js實(shí)現(xiàn)顏色漸變效果
今天做組織機(jī)構(gòu),要分級別顯示顏色,自己計(jì)算半天也沒算出顏色漸變的方法,出來總是花里胡哨的難看的不要不要的,所以查了一下,找到一個(gè)js代碼,試了試,很完美哦!
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src="js/jquery-1.11.3.js"></script> <script src="js/swiper-3.3.1.jquery.min.js"></script> <script type="text/javascript"> /* // startColor:開始顏色hex // endColor:結(jié)束顏色hex // step:幾個(gè)階級(幾步) */ function gradientColor(startColor,endColor,step){ startRGB = this.colorRgb(startColor);//轉(zhuǎn)換為rgb數(shù)組模式 startR = startRGB[0]; startG = startRGB[1]; startB = startRGB[2]; endRGB = this.colorRgb(endColor); endR = endRGB[0]; endG = endRGB[1]; endB = endRGB[2]; sR = (endR-startR)/step;//總差值 sG = (endG-startG)/step; sB = (endB-startB)/step; var colorArr = []; for(var i=0;i<step;i++){ //計(jì)算每一步的hex值 var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')'); colorArr.push(hex); } return colorArr; } // 將hex表示方式轉(zhuǎn)換為rgb表示方式(這里返回rgb數(shù)組模式) gradientColor.prototype.colorRgb = function(sColor){ var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; var sColor = sColor.toLowerCase(); if(sColor && reg.test(sColor)){ if(sColor.length === 4){ var sColorNew = "#"; for(var i=1; i<4; i+=1){ sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1)); } sColor = sColorNew; } //處理六位的顏色值 var sColorChange = []; for(var i=1; i<7; i+=2){ sColorChange.push(parseInt("0x"+sColor.slice(i,i+2))); } return sColorChange; }else{ return sColor; } }; // 將rgb表示方式轉(zhuǎn)換為hex表示方式 gradientColor.prototype.colorHex = function(rgb){ var _this = rgb; var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; if(/^(rgb|RGB)/.test(_this)){ var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,"").split(","); var strHex = "#"; for(var i=0; i<aColor.length; i++){ var hex = Number(aColor[i]).toString(16); hex = hex<10 ? 0+''+hex :hex;// 保證每個(gè)rgb的值為2位 if(hex === "0"){ hex += hex; } strHex += hex; } if(strHex.length !== 7){ strHex = _this; } return strHex; }else if(reg.test(_this)){ var aNum = _this.replace(/#/,"").split(""); if(aNum.length === 6){ return _this; }else if(aNum.length === 3){ var numHex = "#"; for(var i=0; i<aNum.length; i+=1){ numHex += (aNum[i]+aNum[i]); } return numHex; } }else{ return _this; } } var gradient = new gradientColor('#e82400','#8ae800',10); console.log(gradient);//控制臺(tái)輸出 alert(gradient); for(var i=0;i<gradient.length;i++){ var htmls='<div class="mmm'+i+'">'+i+'</div>'; $("body").append(htmls); console.log($("mmm"+i)); console.log(gradient[i]); $(".mmm"+i).css("background-color",gradient[i]); } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
當(dāng)檢測某個(gè)對象是否擁有某個(gè)屬性時(shí),hasOwnProperty 是唯一可以完成這一任務(wù)的方法,在 for in 循環(huán)時(shí),建議增加 hasOwnProperty 進(jìn)行判斷,可以有效避免擴(kuò)展本地原型而引起的錯(cuò)誤2013-06-06用canvas 實(shí)現(xiàn)個(gè)圖片三角化(LOW POLY)效果
這篇文章主要介紹了用canvas 實(shí)現(xiàn)個(gè)圖片三角化(LOW POLY)效果 的相關(guān)資料,需要的朋友可以參考下2016-02-02微信小程序?qū)崿F(xiàn)傳遞多個(gè)參數(shù)與事件處理
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)傳遞多個(gè)參數(shù)與事件處理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08JavaScript實(shí)現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法,是javascript比較典型的數(shù)值轉(zhuǎn)換應(yīng)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02js獲取觸發(fā)事件元素在整個(gè)網(wǎng)頁中的絕對坐標(biāo)(示例代碼)
這篇文章主要介紹了js獲取觸發(fā)事件元素在整個(gè)網(wǎng)頁中的絕對坐標(biāo)。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及遇到的坑
JavaScript是一個(gè)神奇的語言,字符串轉(zhuǎn)數(shù)字有5種方法,各有各的坑法!接下來通過本文給大家介紹JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及其陷阱,感興趣的朋友一起看看吧2018-07-07