玩转网页滚动条

网页

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

给滚动条换色
几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码<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>

时间: 2024-09-19 09:21:59

玩转网页滚动条的相关文章

网页高手-玩转网页滚动条

网页 网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:"只有你想不到的,没有做不到的." 给滚动条换色 几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽.我们只要在网页代码<head> </head>之间插入下面的代码,即可随心所欲地更改颜色了. <style>body {SCROLLBAR-FACE

轻轻松松实现另类的网页滚动条

网页 在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的,而是漂亮的红色或其它颜色,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 网页滚动条代码及其解释如下:(复制时请将大写尖括号改为小写) <Style type="text/css"> <!-- Body { scrollbar-face-color:#C0C0C0; (表面) scrollbar-highlight-color:#FFFFFF;(亮边) scrollbar-3dlig

用CSS代码轻松Diy你的网页滚动条

css|网页     在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的,而是漂亮的红色或其它颜色,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢?      网页滚动条代码及其解释如下:(复制时请将大写尖括号改为小写) <Style type="text/css">  <!--   Body {  scrollbar-face-color:#C0C0C0; (表面)  scrollbar-highlight-color:#FFFFFF;(亮

网页滚动条代码

在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的,而是漂亮的红色或其它颜色,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 网页滚动条代码及其解释如下:(复制时请将大写尖括号改为小写) <Style type="text/css"> <!-- Body { scrollbar-face-color:#C0C0C0; (表面) scrollbar-highlight-color:#FFFFFF;(亮边) scrollbar-3dlight-

js网页滚动条滚动事件实例分析

  本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <style

JS实现网页滚动条感应鼠标变色的方法

 这篇文章主要介绍了JS实现网页滚动条感应鼠标变色的方法,实例分析了javascript针对鼠标事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现网页滚动条感应鼠标变色的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>JS实现网页滚动条感应鼠标变色</title> </head> <body> 把你的目光转向右侧的滚动条看一下吧?是不是很

用傲游浏览器玩转网页聊天软件

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   傲游浏览器3(Maxthon Browser), 是一款功能丰富的多标签浏览器. 既然是网页聊天软件,基于网页平台,那么对于它的载体 – 浏览器来说,稳定与否.方便与否便极为重要,今天,笔者便以WebQQ为例,为大家推荐使用目前最受用户喜爱的浏览器 – 傲游来更好的玩转网页聊天. 1.锁定聊天标签,防止意外关闭 WebQQ基于网页平台,所以一旦关闭页面,便会自动

js网页滚动条滚动事件实例分析_javascript技巧

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

JS实现网页滚动条感应鼠标变色的方法_javascript技巧

本文实例讲述了JS实现网页滚动条感应鼠标变色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现网页滚动条感应鼠标变色</title> </head> <body> 把你的目光转向右侧的滚动条看一下吧?是不是很漂亮噢?鼠标放上还会变换色彩呢? <br><br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途.</p&