玩转网页滚动条

智源网于金日改版成功！ [ 2008年7月1日]

	加入收藏
	设为首页
	联系站长

您现在的位置：智源网 >> 网站建设 >> 网页软件 >> 教程正文

玩转网页滚动条

★★★

【字体：小大】

玩转网页滚动条

作者：佚名教程来源：本站原创点击数：更新时间：2008-7-18

网页滚动条本身就是浏览器的一部分，使用它可以方便浏览较大的网页，但是千篇一律的它经常会给整体页面效果拖了不少后腿，我们能不能改变它灰灰的样子呢？能！俗话说：“只有你想不到的，没有做不到的。”
给滚动条换色

　　几乎所有网页的滚动条都是默认的灰色，如果把它的颜色换换，来点另类的，相信一定会使网页更加靓丽。我们只要在网页代码<head> </head>之间插入下面的代码，即可随心所欲地更改颜色了。

<style>
body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)
SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)
SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立体滚动条强阴影的颜色)
</style>

　　后面的16位颜色值你可以随意更改，括号内是解释说明，在输入时请不要插入。

　　隐藏滚动条

　　在任何情况下，如果网页超出显示范围，就会出现滚动条。但有时我们并不想让它显示，如何隐藏它呢？只需在<body> </body>之间插入代码：<body style="overflow-x:hidden;overflow-y:hidden">即可。其中x表示水平滚动条，将其改为y的话就可以隐藏垂直滚动条。

　　滚屏显示

　　当网页中有长篇文章时，浏览起来就比较吃劲了，想想一边忙着拖动滚动条，一边忙着浏览，确实挺累人的。为了客人能够轻松的浏览，我们可以使用s cript代码实现网页的自动滚屏，当双击网页的时候，网页将会自动向下滚动，再次单击时滚动停止。将下面的代码插入到<body> </body>之间。

<s cript language"javas cript">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</s cript>

教程录入：zd 责任编辑：zd

上一个教程： Dreamweaver MX进阶教程（十三）在Dreamweaver 中使用上标和下标

下一个教程：网页制作中关于网页表单提交的制作

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

最新热点		最新推荐		相关文章
				网页制作中关于网页表单提交… 插入具有辅助功能的表格设置表格的属性制作虚线使用css样式制作细线表格防止英文字符撑破表格使用一象素透明图像固定单元… 制作反馈表单（email发送） Dreamweaver MX+ACCESS制作企… 实现网站批量更新

　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）