位置：71code站长站 → 站长学习 → 网站开发 → JavaS、VbS → 使用图片制作网页滚动条

使用图片制作网页滚动条

减小字体

增大字体作者：Ahaoz.CoM 来源：本站整理发布时间：2006-4-25 9:26:20

　　以前我们也介绍过使用CSS自定义IE的滚动条效果，如果想替换成使用图片制作滚动条，又该如何操作？这里参照一下预览页面，简单介绍一下制作的方法：
　　1、以Iframe制作页面，主页930.htm，Iframe页面930_demo.htm，930.htm中引入子页：<IFRAME name=iii src="930_demo.htm" frameBorder=0 width="80%" scrolling=no height=250></IFRAME>
　　注意需要将页面默认的滚动条关闭：scrolling=no
　　2、建立930_demo.htm页面，在<head>中插入scroll.js文件：<SCRIPT src="./930/scroll.js"></SCRIPT>
　　Scroll.js文件下载
　　3、在<body>中加入代码：
<body style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px" onload=langth() onresize=langth() onmousemove=scrollit() onmousedown=bu() scroll=no>
　　注意也需要将930_demo.htm默认的滚动条关闭：scrolling=no
　　4、相应插入下面的代码：
<div oncontextmenu="return false" onMouseDown=scrollitfa() id=scrb
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; RIGHT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 12pt; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; HEIGHT: 100%; BACKGROUND-COLOR: #999999"><img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; magin: 0"
height="100%" src="930/vb.jpg" width="100%"> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 12pt; magin: 0"
height=8 src="930/vbu.jpg" width="100%"> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BOTTOM: 12pt; BORDER-BOTTOM: 0px; POSITION: absolute; magin: 0"
height=8 src="930/vbd.jpg" width="100%"> <img
id=scru
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; RIGHT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 12pt; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 12pt; magin: 0"
src="930/up.jpg">
<div id=scr
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; RIGHT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 12pt; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 9pt; magin: 0"><img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; magin: 0"
height="100%" src="930/vs.jpg" width="100%"> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; magin: 0"
height=8 src="http://www.5dm.cn/930/vsu.jpg" width="100%"> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BOTTOM: -1px; BORDER-BOTTOM: 0px; POSITION: absolute; magin: 0"
height=8 src="930/vsd.jpg" width="100%"> </div>
<img
id=scrd
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; RIGHT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 12pt; BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; HEIGHT: 12pt"
src="930/down.jpg"> </div>
<div oncontextmenu="return false" onMouseDown=scrollitfaH() id=scrbH
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 100%; BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; HEIGHT: 12pt; BACKGROUND-COLOR: #999999"><img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; magin: 0"
height="100%" src="930/hb.jpg" width="100%"> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; LEFT: 12pt; BORDER-LEFT: 0px; BOTTOM: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; magin: 0"
height="100%" src="930/hbl.jpg" width=8> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 12pt; BORDER-LEFT: 0px; BOTTOM: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; magin: 0"
height="100%" src="930/hbr.jpg" width=8> <img
id=scrlH
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 12pt; BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: relative; HEIGHT: 12pt"
src="930/left.jpg">
<div id=scrH
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; LEFT: 9pt; PADDING-BOTTOM: 0px; BORDER-LEFT: 0px; BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; HEIGHT: 12pt; magin: 0"><img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; magin: 0"
height="100%" src="930/hs.jpg" width="100%"> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; LEFT: 0px; BORDER-LEFT: 0px; BOTTOM: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; magin: 0"
height="100%" src="930/hsl.jpg" width=8> <img
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; RIGHT: 0px; BORDER-LEFT: 0px; BOTTOM: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; magin: 0"
height="100%" src="

[1] [2] 下一页

[] [返回上一页] [打印]