How to Use JS to detect mouse color on a webpage scroll bar
This article mainly introduces how to use javascript to detect mouse color on a webpage scroll bar. The example analyzes javascript's operation skills for mouse events, which has some reference value. For more information, see
This article describes how to use JavaScript to detect mouse color changes on a webpage scroll bar. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<Html>
<Head>
<Title> JavaScript enables the mouse to change color when the webpage scroll bar is located </title>
</Head>
<Body>
Let's look at the scroll bar on the right? Pretty? When you place the mouse, the color will change?
<Br> <Script language = "JavaScript">
<! --
Function scrollBar (line, face, theme)
{
If (! Line |! Face)
{
Line = null;
Face = null;
Switch (theme)
{
Case "blue ":
Var line = "#78 AAFF ";
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>
I hope this article will help you design javascript programs.
