使用图片制作网页滚动条
点击次数：24 次 发布日期：2008-11-26 23:00:57 作者：源代码网
|
1、以Iframe制作页面，主页930.htm，Iframe页面930_demo.htm，930.htm中引入子页：<IFRAME name=iii src="http://www.blue1000.com/article/930_demo.htm" frameBorder=0 width="80%" scrolling=no height=250></IFRAME> 注意需要将页面默认的滚动条关闭：scrolling=no 2、建立930_demo.htm页面，在<head>中插入scroll.js文件：<SCRIPT src=http://www.blue1000.com/article/"./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() onmouseup="scr.style.filter="alpha(opacity=100)";scrH.style.filter="alpha(opacity=100)";st=0;clearInterval(upm);clearInterval(downm);clearInterval(leftm);clearInterval(rightm);" 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="http://www.zzchn.com/edu/20071117/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="http://www.zzchn.com/edu/20071117/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="http://www.zzchn.com/edu/20071117/930/vbd.jpg" width="100%"> <img onMouseDown="upm=setInterval("upmain()",1)" 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="http://www.zzchn.com/edu/20071117/930/up.jpg"> <div onMouseDown="find();this.style.filter="alpha(opacity=90)"" 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="http://www.zzchn.com/edu/20071117/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.blue1000.com/article/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="http://www.zzchn.com/edu/20071117/930/vsd.jpg" width="100%"> </div> <img onMouseDown="downm=setInterval("downmain()",1)" 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="http://www.zzchn.com/edu/20071117/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="http://www.zzchn.com/edu/20071117/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="http://www.zzchn.com/edu/20071117/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="http://www.zzchn.com/edu/20071117/930/hbr.jpg" width=8> <img onMouseDown="leftm=setInterval("leftmain()",1)" 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="http://www.zzchn.com/edu/20071117/930/left.jpg"> <div onMouseDown="findH();this.style.filter="alpha(opacity=90)"" 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="http://www.zzchn.com/edu/20071117/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="http://www.zzchn.com/edu/20071117/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="http://www.zzchn.com/edu/20071117/930/hsr.jpg" width=8> </div> <img onMouseDown="rightm=setInterval("rightmain()",1)" id=scrrH 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="http://www.zzchn.com/edu/20071117/930/right.jpg"> </div> <img oncontextmenu="return false" id=fk 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="http://www.zzchn.com/edu/20071117/930/fk.jpg"> <div id=main1 style="BORDER-RIGHT: #ffffff 1px; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: #ffffff 1px; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px; POSITION: absolute; BACKGROUND-COLOR: #ffffff; layer-background-color: #ffffff"> <div id=main style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; COLOR: #ffffff; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; POSITION: relative; BACKGROUND-COLOR: #ffffff"> <table cellspacing=0 cellpadding=0 width="700" align=center border=0> <tbody> <tr> <td class="cn"> <font color="#000000"> “织梦幻影”为站点互动学院（http://favorites.myrice.com）的最新版本。我们在汲取前版本制作经验的基础上，加以新技术，摒除前版本内容杂、管理烦、更新慢的缺点，全新制作了新的版本 ─ 织梦幻影。<br> 新站点主要收集网络技术、网站制作的教学文章，定位于初、中级网站设计制作人员，提供更新、更好、更为丰富的文章，给您制作、设计 源代码网供稿. |
