99265.COM BETA | 新设计 新视觉 回首页 | 登录

今天是:
您现在的位置: 新视觉 >> 教程 >> 网页 >> css >> 教程正文:“网页滚动条”设置技巧
“网页滚动条”设置技巧
作者:未知 文章来源:未知 添加时间:2008-3-26

 网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:“只有你想不到的,没有做不到的。”
给滚动条换色
FRA
  几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码<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的话就可以隐藏垂直滚动条。

  滚屏显示

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

<script language"javascript">
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
</script>
  • 上一篇教程:

  • 下一篇教程:
  • 打印此文 』『关闭窗口
    【相关文章】
  • 网页滚动条的设置

  • 【免责声明】
    本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。如果本站转载的文章有任何版权问题或任何异议,请惠赐:99_265#163.com。
    推荐文章
  • 此栏目下没有推荐教程
  • 热门文章
    普通教程CSS导航菜单
    普通教程框架和滑动门技术分析
    普通教程“网页滚动条”设置技巧
    普通教程“mailto”标签应用技巧
    普通教程实用HTML文件的增强标记
    普通教程CSS兼容要点分析
    普通教程获得本页面URL地址的JS代码
    普通教程什么是XHTML?
    普通教程常用CSS命名参考
    普通教程效果直逼flash的Div+Css+Js菜单
    普通教程用代码实现页面内文字的滚动详…
    普通教程十步学会用css建站
    普通教程双击鼠标滚动屏幕的代码
    普通教程meta标签之详解
    普通教程网页中实现细线边框的两种方法
      © 2007 新视觉. 99265.com  关于新视觉 - 广告服务 - 版权申明 - 联系我们 - 皖ICP备05001767号.