JS實現(xiàn)網(wǎng)頁滾動條感應鼠標變色的方法

更新時間：2015年02月26日 12:11:26 作者：代碼家園

這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁滾動條感應鼠標變色的方法,實例分析了javascript針對鼠標事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)網(wǎng)頁滾動條感應鼠標變色的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<html>

<head>

<title>JS實現(xiàn)網(wǎng)頁滾動條感應鼠標變色</title>

</head>

<body>

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

<br><br><hr> 收集于互聯(lián)網(wǎng)，只為興趣與學習交流，不作商業(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>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼
這篇文章主要介紹了微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
layui select動態(tài)添加option的實例
下面小編就為大家分享一篇layui select動態(tài)添加option的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
基于JavaScript實現(xiàn)簡單掃雷游戲
這篇文章主要介紹了基于JavaScript實現(xiàn)簡單掃雷游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格的方法，效果十分棒,需要的朋友可以參考下
2015-01-01
代碼精簡的可以實現(xiàn)元素圓角的js函數(shù)
代碼精簡的可以實現(xiàn)元素圓角的js函數(shù)...
2007-07-07
淺談Javascript線程及定時機制
這篇文章主要介紹了淺談Javascript線程及定時機制的相關(guān)資料,需要的朋友可以參考下
2015-07-07
JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法的具體區(qū)別詳
在JavaScript中數(shù)組是一種非常常見且功能強大的數(shù)據(jù)結(jié)構(gòu),這篇文章主要介紹了JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法具體區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-04-04
js 代碼優(yōu)化點滴記錄
這次項目中有一個功能，頻繁使用switch語句，代碼優(yōu)化的時候，將其換成數(shù)組
2012-02-02
jQuery NProgress.js加載進度插件的簡單使用方法
NProgress是基于jquery的，且版本要 >1.8 。這篇文章主要介紹了NProgress.js加載進度插件的簡單使用方法,需要的朋友可以參考下
2018-01-01
JavaScript計算正方形面積
這篇文章主要為大家詳細介紹了JavaScript計算正方形面積，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11