本發(fā)明屬于汽車內(nèi)飾氛圍燈，具體為汽車內(nèi)飾氛圍燈顏色變化算法方法。
背景技術：
1、汽車內(nèi)飾氛圍燈顏色變化是指在汽車網(wǎng)站里為了顯示不同顏色的汽車內(nèi)飾氛圍燈而實現(xiàn)的技術方案，為了展示不同氛圍燈的變化，需要把所有顏色的氛圍燈圖片放在頁面內(nèi)容里，然后根據(jù)不同選擇展示不同顏色的氛圍燈，目前市面上要實現(xiàn)這個效果大部分都是通過切換不同顏色的圖片來實現(xiàn)氛圍燈顏色變化效果。
2、現(xiàn)有的汽車氛圍燈顏色變化的算法方案主要通過依賴javascript來實現(xiàn)的切換圖片效果，實現(xiàn)方式都是使用javascript先記錄當前所展示的顏色圖片，然后在切換到對應顏色時改變對應顏色的圖片引用地址，等需要切換到下一個顏色時再獲取對應的顏色圖片地址，在使用javascript來修改圖片地址，意味著瀏覽器需要預先加載出所有圖片的內(nèi)容，為了實現(xiàn)不同顏色的切換，還需要對所有圖片按照顏色排列，從而在切換顏色時尋找到對應的圖片地址，只有這樣才能保證所有氛圍燈的顏色能夠全部展示出來，而這樣的氛圍燈顏色變化的算法方案不僅需要對所有圖片的內(nèi)容進行加載并排列，而且方法復雜，因此需要對其進行改進。
技術實現(xiàn)思路
1、本發(fā)明的目的在于提供汽車內(nèi)飾氛圍燈顏色變化算法方法，以解決上述背景技術中提出的問題。
2、為實現(xiàn)上述目的，本發(fā)明提供如下技術方案：汽車內(nèi)飾氛圍燈顏色變化算法方法，包括以下步驟：
3、步驟一：預先準備5張圖片，標號1號、2號、3號、4號、5號，顏色分別是紅色、紫色、藍色、黃色、綠色；
4、步驟二：設置html結構如下：
5、<input?type＝range?min＝0max＝100step＝0.1/>
6、<img?src＝red.jpg/>
7、<img?src＝purple.jpg/>
8、<img?src＝blue.jpg/>
9、<img?src＝y(tǒng)ellow.jpg/>
10、<img?src＝green.jpg/>
11、通過css設置每張圖片的樣式屬性為position：absolute，讓2號圖片蓋在1號上面，3號圖片蓋在2號上面，4號圖片蓋在3號上面，5號圖片蓋在4號上面，然后設置讓1號紅色圖片透明度為opacity：1，剩下的圖片透明度為opacity：0；
12、代碼如下：
13、<img?src＝red.jpg?style＝“position:absolute；opacity:1”/>
14、<img?src＝purple.jpg?style＝“position:absolute；opacity:0”/>
15、<img?src＝blue.jpg?style＝“position:absolute；opacity:0”/>
16、<img?src＝y(tǒng)ellow.jpg?style＝“position:absolute；opacity:0”/>
17、<img?src＝green.jpg?style＝“position:absolute；opacity:0”/>
18、步驟三：設置一個數(shù)組，按照數(shù)組內(nèi)順序分別記錄所有圖片的初始透明度為[1,0,0,0,0]，這時只能看到最底部紅色圖片內(nèi)容；
19、步驟四：把滑塊滑動范圍設置為每隔25為一個單位，分別設置四個滑動范圍，分別是0-25,25-50,50-75,75-100；
20、步驟五：滑動滑塊時記錄滑動進度，設置每滑動一個單位，改變2號紫色圖片的透明度由0％增加至4％，直到滑動到25時透明度為100％，圖片由紅色漸變成暗紅色，而后變成紫色，數(shù)組的值由[1,0,0,0,0]變成[1,0.5,0,0,0]到[1,1,0,0,0]，這時2號圖片逐漸覆蓋1號圖片，內(nèi)飾氛圍燈顏色從紅色變成暗紅色，最后變成紫色；
21、步驟六：繼續(xù)滑動滑塊，滑動范圍在25-50之間時，改變3號圖片透明度，設置每滑動1個單位3號圖片透明度增加4％，直到滑動到50時，3號圖片的透明度為100％，數(shù)組的值由[1,1,0,0,0]變成[1,1,0.5,0,0]到[1,1,1,0,0]，這時內(nèi)飾氛圍燈顏色由紫色變?yōu)榍嗌?，最后變?yōu)樗{色；
22、步驟七：繼續(xù)滑動滑塊，滑動范圍在50-75之間時，改變4號圖片透明度，設置每滑動1個單位4號圖片透明度增加4％，直到滑動到75時，4號圖片的透明度為100％，數(shù)組的值由[1,1,1,0,0]變成[1,1,1,0.5,0]到[1,1,1,1,0]，這時內(nèi)飾氛圍燈顏色由藍色變?yōu)榫G豆色，最后變?yōu)辄S色；
23、步驟八：繼續(xù)滑動滑塊，滑動范圍在75-100之間時，逐漸改變5號圖片透明度，設置每滑動1個單位5號圖片透明度增加4％，直到滑動到100時，5號圖片的透明度為100％，數(shù)組的值由[1,1,1,1,0]變成[1,1,1,1,0.5]到[1,1,1,1,1]，這時頁面中的內(nèi)飾氛圍燈顏色由黃色淺綠色，最后變?yōu)榫G色。
24、優(yōu)選的，步驟一所述的5張圖片尺寸均相同，所述5張圖片的顏色各不相同。
25、優(yōu)選的，步驟二所述的html結構包括有頭部區(qū)域和主體區(qū)域兩個部分，所述html結構主要由三個標簽負責組織。
26、優(yōu)選的，步驟二所述的css由選擇符(selector)、屬性(property)和值(value)三個主要部分組成，所述屬性(property)是css樣式的控制核心。
27、優(yōu)選的，步驟三所述的數(shù)組是一種復合數(shù)據(jù)類型，所述數(shù)組由一系列相同類型的元素組成。
28、優(yōu)選的，步驟四所述的滑塊是一種常見的界面元素，出現(xiàn)在汽車屏幕上，允許駕駛員或者乘客直觀的調(diào)整氛圍燈的顏色和亮度。
29、優(yōu)選的，步驟四所述的滑動范圍為四個，四個所述滑動范圍分別設置有四種不同的提示音。
30、優(yōu)選的，步驟五所述的滑動進度設置有刻度線，所述刻度線之間的距離對應一個單位。
31、優(yōu)選的，步驟二所述的position：absolute表示為圖片將以絕對定位的方式顯示。
32、與現(xiàn)有技術相比，本發(fā)明的有益效果如下：
33、本方案基于顏色混合原理，僅使用4張顏色圖片，通過調(diào)整圖片透明度，使不同透明的圖片互相疊加產(chǎn)生相對于疊加圖片不同的顏色圖片，通過使用滑塊來過渡不同顏色之間的差異，從而達到用少量圖片產(chǎn)生多種不同顏色圖片的效果，減少了代碼開發(fā)量和圖片加載量，減少了圖片加載過多而導致的頁面性能變慢，提高了網(wǎng)站加載速度，降低了服務器的負載，豐富了視覺效果，同時該方案簡單且不易出錯，保障了汽車氛圍燈顏色變化的穩(wěn)定性。
1.汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于，包括以下步驟：
2.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟一所述的5張圖片尺寸均相同，所述5張圖片的顏色各不相同。
3.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟二所述的html結構包括有頭部區(qū)域和主體區(qū)域兩個部分，所述html結構主要由三個標簽負責組織。
4.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟二所述的css由選擇符(selector)、屬性(property)和值(value)三個主要部分組成，所述屬性(property)是css樣式的控制核心。
5.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟三所述的數(shù)組是一種復合數(shù)據(jù)類型，所述數(shù)組由一系列相同類型的元素組成。
6.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟四所述的滑塊是一種常見的界面元素，出現(xiàn)在汽車屏幕上，允許駕駛員或者乘客直觀的調(diào)整氛圍燈的顏色和亮度。
7.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟四所述的滑動范圍為四個，四個所述滑動范圍分別設置有四種不同的提示音。
8.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟五所述的滑動進度設置有刻度線，所述刻度線之間的距離對應一個單位。
9.根據(jù)權利要求1所述的汽車內(nèi)飾氛圍燈顏色變化算法方法，其特征在于：步驟二所述的position：absolute表示為圖片將以絕對定位的方式顯示。