JS实现网页滚动条感应鼠标变色的方法
本文实例讲述了JS实现网页滚动条感应鼠标变色的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <title>JS实现网页滚动条感应鼠标变色</title> </head> <body> 把你的目光转向右侧的滚动条看一下吧?是不是很漂亮噢?鼠标放上还会变换色彩呢? <br><br><hr>收集于互联网,只为兴趣与学习交流,不作商业用途。</p> <scriptlanguage="JavaScript"> <!-- functionscrollBar(line,face,theme) { if(!line||!face) { line=null; face=null; switch(theme) { case"blue": varline="#78AAFF"; varface="#EBF5FF"; break; case"orange": varline="#FBBB37"; varface="#FFF9DF"; break; case"red": varline="#FF7979"; varface="#FFE3DD"; break; case"green": varline="#00C600"; varface="#D1EED0"; break; case"neo": varline="#BC7E41"; varface="#EFE0D1"; break; } } with(document.body.style) { scrollbarDarkShadowColor=line; scrollbar3dLightColor=line; scrollbarArrowColor="black"; scrollbarBaseColor=face; scrollbarFaceColor=face; scrollbarHighlightColor=face; scrollbarShadowColor=face; scrollbarTrackColor="#F3F3F3"; } } functioncolorBar(){ varw=document.body.clientWidth; varh=document.body.clientHeight; varx=event.clientX; vary=event.clientY; if(x>w)scrollBar('#000080','#BFDFFF');//Yourcolors elsescrollBar(null,null,"neo");//Apredefinedtheme } if(document.all){ scrollBar(null,null,"neo"); document.onmousemove=colorBar; } //--> </script> <br/> <divstyle="width:100%;height:1000px;"></div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。