彩色變化
最近在學習js開發，突然想實現這樣乙個效果，滾動條往下拉時元素顏色由淺變深，於是就嘗試做這樣乙個功能。
滾動部分，計算出網頁可以滾動的範圍，同時監聽滾動事件，然後使用計算顏色的變化，給目標加上相應的css樣式即可。
var scrollbegin =
200,
//顏色變化開始位置，自行定義
scrolltop,
//當前滾動位置
scrollarea;
//可滾動區域
//計算可滾動區域
scrollarea =
(function()
else})
()//監聽滾動
$(window)
.scroll
(function()
)
這裡涉及到rgb顏色模式的一些知識，rgb顏色模式就是紅（r）、綠（g）、藍（b）三原色以光的混合模式進行混合得到表現顏色，對應色值越高則該顏色的明度越高，也就是該顏色越明顯，如rgb（255，0，0）表示紅色光源最亮，綠色和藍色光源最暗，這樣得到的混合顏色最終表現為紅色。
如果三個顏色色值均為最高，即為rgb（255，255，255），則混合而成的顏色為白色，反之rgb（0，0，0）則為黑色。因此介於之間的三色值相等的顏色即為不同深淺的灰色。
於是想要實現灰色從淺變深，則需要設定相同的rgb三種顏色的色值即可。需要的引數如下。
var topcolor =
255,
//頂部顏色色值(淺灰色)，自行定義
bottomcolor =
100,
//底部顏色色值(深灰色)，自行定義
settingcolor =0,
//用於設定的顏色色值，計算得出
origincolor,
//元素本身的顏色
colorvalue;
//用於css樣式賦值的顏色語句
//獲取物件本身顏色
origincolor =
$(target)
.css
("background-color"
);
色 值=
(頂部色
值−底部
色值)∗
(當前位
置−開始
位置)可
滾動高度
−開始位
置色值=\frac
色值=可滾動
高度−開
始位置(
頂部色值
−底部色
值)∗(
當前位置
−開始位
置)其**如下
//監聽滾動中 修改顏色... 的部分
if(scrolltop < scrollbegin));
}else);
}
""
>
<
/script>
var scrollbegin =
200,
//顏色變化開始位置
scrolltop,
//當前滾動位置
scrollarea,
//可滾動區域
topcolor =
255,
//頂部顏色色值
bottomcolor =
100,
//底部顏色色值
settingcolor,
//計算出來用於設定的顏色色值
origincolor,
//元素本身的顏色
colorvalue,
//用於css樣式賦值的顏色
target =
"body"
;//操作物件
//獲取物件本身顏色
origincolor =
$(target)
.css
("background-color");
//計算可滾動區域
scrollarea =
(function()
else})
()//監聽滾動
$(window)
.scroll
(function()
);}else);
}})<
/script>
後來想了一下，可以拓展成彩色的變化，滾動部分內容基本相同，改變顏色的部分，即可實現彩色變化的效果。
首先，如果要讓顏色實現彩色變化，那麼三原色色值上的變化肯定不相同了，為了方便使用，定義了乙個顏色的建構函式。
//顏色建構函式
function
rgb(r, g, b)
}
//色值計算公式
function
colorcalc
(top, bottom)
//紅色色值
settingcolor.red =
colorcalc
(topcolor.red, bottomcolor.red)
;//綠色色值
settingcolor.green =
colorcalc
(topcolor.green, bottomcolor.green)
;//藍色色值
settingcolor.blue =
colorcalc
(topcolor.blue, bottomcolor.blue)
;//目標賦值
$(target)
.css()
;}
""
>
<
/script>
var scrollbegin =
200,
//顏色變化開始位置
scrolltop,
//當前滾動位置
scrollarea,
//可滾動區域
topcolor,
//頂部顏色色值
bottomcolor,
//底部顏色色值
settingcolor,
//計算出來用於設定的顏色色值
origincolor,
//元素本身的顏色
target =
"body"
;//操作物件
//獲取物件本身顏色
origincolor =
$(target)
.css
("background-color");
//顏色建構函式
function
rgb(r, g, b)
}//顏色設定
topcolor =
newrgb
(156,80
,80);
//頂部顏色，自定義
bottomcolor =
newrgb
(201
,230
,162);
//底部顏色，自定義
settingcolor =
newrgb
(255
,255
,255);
//設定使用，計算得出
//計算可滾動區域
scrollarea =
(function()
else})
()//色值計算公式
function
colorcalc
(top, bottom)
//監聽滾動
$(window)
.scroll
(function()
);}else);
}})<
/script>
div設定滾動條和滾動條顏色
當div所定義的區域的內容達到一定程度時，在div標籤裡面嵌入css樣式表，定義overflow的屬性值，設定滾動條相關的屬性。注 1.overflow visible 卻省值，沒有滾動條，根據內容自動擴撐區域的大小，即定義的區域無效 scroll 總是顯示滾動條 hidden 沒有滾動條，超出區域...
修改chrome 滾動條顏色
實現效果 主要css 滾動條 myp webkit scrollbar 滾動條傳送 myp webkit scrollbar track piece 拖動的部分 myp webkit scrollbar thumb myp class myp 修改滾動條顏色 修改滾動條顏色 修改滾動條顏色 修改滾動...
Intellij IDEA 修改滾動條顏色
settings editor color scheme 在macos preferences editor color scheme 按下右側的齒輪以選擇方案，然後 export intellij idea color scheme icls 開啟匯出的 icls 檔案。編輯 colors 節點下...