以前我们也介绍过使用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" οnlοad=langth() οnresize=langth() οnmοuseup="scr.style.filter='alpha(opacity=100)';scrH.style.filter='alpha(opacity=100)';st=0;clearInterval(upm);clearInterval(downm);clearInterval(leftm);clearInterval(rightm);" οnmοusemοve=scrollit() οnmοusedοwn=bu() scroll=no>
注意也需要将930_demo.htm默认的滚动条关闭:scrolling=no
4、相应插入下面的代码:
<div οncοntextmenu="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=" 9
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" οnlοad=langth() οnresize=langth() οnmοuseup="scr.style.filter='alpha(opacity=100)';scrH.style.filter='alpha(opacity=100)';st=0;clearInterval(upm);clearInterval(downm);clearInterval(leftm);clearInterval(rightm);" οnmοusemοve=scrollit() οnmοusedοwn=bu() scroll=no>
注意也需要将930_demo.htm默认的滚动条关闭:scrolling=no
4、相应插入下面的代码:
<div οncοntextmenu="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=" 9