JS实现网页滚动条感应鼠标变色的方法
发布网友
发布时间：2022-04-27 08:42
共1个回答
热心网友
时间：2022-04-22 07:01
本文实例讲述了JS实现网页滚动条感应鼠标变色的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<html>
<head>
<title>JS实现网页滚动条感应鼠标变色</title>
</head>
<body>
把你的目光转向右侧的滚动条看一下吧？是不是很漂亮噢？鼠标放上还会变换色彩呢？
<br><br><hr>
收集于互联网，只为兴趣与学习交流，不作商业用途。</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程序设计有所帮助。
