[转]：玩转“滚动条” - 达人(x_wolf)

2004/08/18 | [转]：玩转“滚动条”
类别(代码集中营) | 评论(0) | 阅读(339) | 发表于 00:21: 玩转“滚动条”

　　看惯了浏览器上一成不变的滚动条，你是否感到一丝厌倦？让我们把滚动条也玩出点花样吧。

　　一、隐藏所有滚动条
　　既然厌倦了，就让它隐藏起来吧：

　　＜body scroll="no"＞或＜body style="overflow:hidden"＞

　　二、隐藏纵、横向滚动条
　　如果要隐藏某个方向上的滚动条该怎么办？其实同样简单：

　　＜body style="overflow-y:hidden"＞

　　＜!--隐藏纵向滚动条--＞

　　＜body style="overflow-x:hidden"＞

　　＜!--隐藏横向滚动条--＞

　　三、改变滚动条的位置
　　干脆把滚动条的位置也换换吧：

　　将右边滚动条移至左边：

　　＜body dir="rtl"＞

　　将底部滚动条移至顶部：

　　做这个效果稍微有点复杂，用到了分帧，需要三个页面，在这里假设父页面为main.htm，子页面为top.htm和bottom.htm。

　　main.htm文件的内容：

　　＜html＞

　　＜frameset rows="15,*" frameborder="0"＞

　　＜frame src="top.htm"＞

　　＜frame src="bottom.htm"＞

　　＜/frameset＞

　　＜/html＞

　　top.htm文件的内容：

　　＜html＞

　　＜!--当滚动事件触发时，使一下帧页面的横向滚动距离与上一帧页面的横向滚动距离保持一致--＞

　　＜body onscroll="top.frames.bottom.document.body.scrollLeft=document.body.scrollLeft"style="overflow-y:hidden"＞

　　＜!-插入一个层，并使它的宽度等于下一帧页面的滚动栏宽度--＞

　　＜div style="width:expression(top.frames.bottom.document.body.scrollWidth)"＞

　　＜/div＞

　　＜/body＞

　　＜/html＞

　　bottom.htm文件的内容：

　　＜html＞

　　＜body scroll="no"＞

　　＜!-为了能看到顶部滚动条，在主体中应写入尽可能多的字符语句--＞

　　＜/body＞

　　＜/html＞

　　OK，经过这样纵向横向的变换，你的滚动条与别人的比起来，就显得有个性了许多。

　　四、改变滚动条的颜色
　　“灰头土脸”的滚动条，真想把它的颜色也改了！

　　其实彩色滚动条效果目前在网上可是非常流行的，它通过专门的DW插件完成，该插件的下载地址为 www.cpcw.com/download/soft/37/ie55_scrollbar.mxp。下载后用DW自带的Extension Manager安装之后即可在common面板中找到，设置非常简单，和Photoshop取色板类似，选择好颜色后按下“OK”完成。不过有一点得注意，需要IE版本5.5以上才能看到该效果。

　　五、图片式滚动条
　　现在位置也换了，颜色也变了，该轮到改形状了：

　　先隐藏原来的滚动条(参考前面的第一种方法)，接着找两张示意上下方向的图片，插入到网页中，最后在图片上加上javascript特效就大功告成了：

　　＜html＞

　　＜script language="javascript"＞

　　var speed=3;

　　＜/script＞

　　＜body scroll="no"＞

　　＜!-鼠标按下时，使页面在水平方向上以0pixel，垂直方向上以10pixel移动，并且每隔0.001秒移动一次；鼠标弹起、移上时，使页面在水平方向上以0pixel，垂直方向上以3pixel移动，并且每隔0.001秒移动一次；鼠标移开时，清除对移动的计时--＞

　　＜img src="up.gif" onmousedown="speed=10"onmouseup="speed=3" onmouseover="ifrscroll=setInterval('ifr.scrollBy(0,-speed)',1)" onmouseout="clearInterval(ifrscroll)"＞＜br＞

　　＜img src="down.gif" onmousedown="speed=10" onmouseup="speed=3"onmouseover="ifrscroll=setInterval('ifr.scrollBy(0,speed)',1)" onmouseout="clearInterval(ifrscroll)"＞

　　＜iframe src="需要滚动的网页地址" id="ifr" scrolling="no"＞

　　＜/body＞

　　＜/html＞

　　结合以上几种方法加以灵活运用，必定会使你的网页增色不少！; 0

http://XWOLF.5d.cn/

评论Comments