god
太多了
这是用CSS来做的:
<STYLE
type="text/css">
<!--
BODY
{
scrollbar-face-color:#CC0000//轴面颜色
scrollbar-arrow-color:#FFFFFF//箭头颜色
scrollbar-track-color:#EDEDED//轴轨道颜色
scrollbar-highlight-color:#FFFFFF//左立体边颜色
scrollbar-3dlight-color:#D1D7DC//轴面左边角颜色
scrollbar-shadow-color:#DEE3E7
//右立体边颜色
scrollbar-darkshadow-color:#BABABA//轴面右边角颜色
}
-->
</style>
只要你根据自己的要求来配置色彩!!!
这篇文章主要介绍了JS实现网页滚动条感应鼠标变色的方法,实例分析了javascript针对鼠标事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了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程序设计有所帮助。
(摘自博客园，原网址http://www.cnblogs.com/reweb/p/3268775.html)
jquery.nicescroll.min.js滚动条使用方法,Nicescroll是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。
页面使用：
$("html").niceScroll({
cursorcolor:"#E62020",
cursoropacitymax:1,
touchbehavior:false,
cursorwidth:"10px",
cursorborder:"0",
cursorborderradius:"5px"
})
nicescroll详细参数配置：
cursorcolor - 设置滚动条颜色，默认值是“＃000000”
cursoropacitymin - 滚动条透明度最小值
cursoropacitymax - 滚动条透明度最大值
cursorwidth - 滚动条的宽度像素，默认为5（你可以写“5PX”）
cursorborder - CSS定义边框，默认为“1px solid #FFF”
cursorborderradius - 滚动条的边框圆角
ZIndex的 - 改变滚动条的DIV的z-index值，默认值是9999
scrollspeed - 滚动速度，默认值是60
mousescrollstep - 滚动鼠标滚轮的速度，默认值是40（像素）
touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
hwacceleration - 使用硬件加速滚动支持时，默认为true
boxzoom - 使变焦框的内容，默认为false
dblclickzoom - （仅当boxzoom = TRUE）变焦启动时，双点击框，默认为true
gesturezoom - boxzoom = true并使用触摸设备）变焦（仅当激活时，间距/盒，默认为true
grabcursorenabled“抢”图标，显示div的touchbehavior = true时，默认值是true
autohidemode，如何隐藏滚动条的作品，真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏
的背景下，改变铁路背景的CSS，默认值为“”
iframeautoresize中，AUTORESIZE iframe上的load事件（默认：true）
cursorminheight，设置最低滚动条高度（默认值：20）
preservenativescrolling，您可以用鼠标滚动本地滚动的区域，鼓泡鼠标滚轮事件（默认：true）
railoffset，您可以添加抵消顶部/左轨位置（默认：false）
bouncescroll，使滚动反弹结束时的内容移动（仅硬件ACCELL）（默认：FALSE）
spacebarenabled，允许使用空格键滚动（默认：true）
railpadding，设置间距（默认：顶：0，右：0，左：0，底部：0}）
disableoutline，Chrome浏览器，禁用纲要（橙色hightlight）时，选择一个div nicescroll（默认：true）
