|
源代码网推荐
浏览器滚动条设定的一个最新改进,不仅仅是设定滚动条的颜色,还带有了鼠标的触发动态效果,当鼠标over滚动条的时候,滚动条会变成另外的样式,非常新颖别致,而且样式可以随意定制!
制作方法: 复制代码到body中: <script language="JavaScript1.2"> <!--
//onMouseover Scrollbar effect- by Svetlin Staev (svetlins@yahoo.com) //Submitted to Dynamic Drive //Visit http://www.dynamicdrive.com for this script
/*---------------[IE 5.5 Scrollbars colorer]--------------------*/ 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"; } }
/*------------------[Pointer coordinates catcher]---------------*/ 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"); // 鼠标移至滚动条的颜色 else scrollBar(null,null,"neo"); // 调用一个预定义的主题 }
if (document.all){ scrollBar(null,null,"neo"); document.onmousemove=colorBar; } //--> </script> 代码中: 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; 这是几种颜色的分类,可以自己修改。 scrollBar(null,null,"neo"); 这句是调用哪种分类。
至此你就可以完成这个实例了,快去试试吧!
源代码网供稿. |