<html>

<head>

<title>JS實(shí)現(xiàn)網(wǎng)頁(yè)滾動(dòng)條感應(yīng)鼠標(biāo)變色</title>

</head>

<body>

把你的目光轉(zhuǎn)向右側(cè)的滾動(dòng)條看一下吧？是不是很漂亮噢？鼠標(biāo)放上還會(huì)變換色彩呢？

<br><br><hr> 收集于互聯(lián)網(wǎng)，只為興趣與學(xué)習(xí)交流，不作商業(yè)用途。</p>

<script language="JavaScript">

<!--

function scrollBar(line,face,theme)

{

if (!line||!face)

{

line=null;

face=null;

switch(theme)

{

case "blue":

var line="#78AAFF";

var face="#EBF5FF";

break;

case "orange":

var line="#FBBB37";

var face="#FFF9DF";

break;

case "red":

var line="#FF7979";

var face="#FFE3DD";

break;

case "green":

var line="#00C600";

var face="#D1EED0";

break;

case "neo":

var line="#BC7E41";

var face="#EFE0D1";

break;

}

}

with(document.body.style)

{

scrollbarDarkShadowColor=line;

scrollbar3dLightColor=line;

scrollbarArrowColor="black";

scrollbarBaseColor=face;

scrollbarFaceColor=face;

scrollbarHighlightColor=face;

scrollbarShadowColor=face;

scrollbarTrackColor="#F3F3F3";

}

}

function colorBar(){

var w = document.body.clientWidth;

var h = document.body.clientHeight;

var x = event.clientX;

var y = event.clientY;

if(x>w) scrollBar('#000080','#BFDFFF'); // Your colors

else scrollBar(null,null,"neo"); // A predefined theme

}

if (document.all){

scrollBar(null,null,"neo");

document.onmousemove=colorBar;

}

//-->

</script>

<br />

<div style="width:100%;height:1000px;"></div>

</body>

</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
深入理解JavaScript中的宏任務(wù)和微任務(wù)機(jī)制
JavaScript中的任務(wù)分為宏任務(wù)和微任務(wù)，它們的執(zhí)行順序會(huì)影響代碼的執(zhí)行結(jié)果。了解它們的機(jī)制可以幫助我們更好地理解事件循環(huán)和異步編程，避免出現(xiàn)一些意想不到的錯(cuò)誤
2023-05-05
iscroll動(dòng)態(tài)加載數(shù)據(jù)完美解決方法
這篇文章主要為大家詳細(xì)介紹了iscroll動(dòng)態(tài)加載數(shù)據(jù)的完美解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
js和jquery中獲取非行間樣式
本篇文章主要介紹了js和jquery中獲取非行間樣式的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-05-05
淺談javascript中this在事件中的應(yīng)用
這篇文章主要介紹了淺談javascript中this在事件中的應(yīng)用實(shí)例，非常有助于我們對(duì)this關(guān)鍵字的理解，這里推薦給大家。
2015-02-02
微信小程序--獲取用戶地理位置名稱(無(wú)須用戶授權(quán))的方法
這篇文章主要介紹了微信小程序-獲取用戶地理位置名稱(無(wú)須用戶授權(quán))的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js實(shí)現(xiàn)tab切換效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的tab標(biāo)簽切換效果，功能非常簡(jiǎn)單，實(shí)現(xiàn)了點(diǎn)擊切換的效果，推薦給大家，有需要的小伙伴可以參考下。
2015-09-09
js 簡(jiǎn)易版滾動(dòng)條實(shí)例(適用于移動(dòng)端H5開發(fā))
下面小編就為大家?guī)?lái)一篇js 簡(jiǎn)易版滾動(dòng)條實(shí)例(適用于移動(dòng)端H5開發(fā))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-06-06
Javascript實(shí)現(xiàn)漢字和拼音互轉(zhuǎn)的終極方案
網(wǎng)上關(guān)于JS實(shí)現(xiàn)漢字和拼音互轉(zhuǎn)的文章很多，但是比較雜亂，有的不支持多音字、不支持聲調(diào)或者字典文件太大，無(wú)法根據(jù)實(shí)際需要滿足需求。這篇文章給大家修正整理網(wǎng)上的幾種常見方法，文章結(jié)尾還附簡(jiǎn)單的JS拼音輸入法，本文對(duì)大家具有一定的參考借鑒價(jià)值，下面一起看看吧。
2016-10-10
常見的JS字符串屬性與方法集錦
字符串的操作在js中非常頻繁,也非常重要,下面這篇文章主要給大家介紹了關(guān)于JS字符串屬性與方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-01-01