使用图片制作网页滚动条

本文介绍了如何使用图片来创建网页滚动条的详细步骤,包括通过Iframe制作页面、引入scroll.js文件、关闭默认滚动条,以及在HTML中插入特定代码实现自定义滚动条效果。教程中还提供了相关代码和图片资源的下载链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以前我们也介绍过使用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() 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=" 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
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=" 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=" 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="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
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=" 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
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=" 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=" 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=" 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=" 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=" 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>
  新站点主要收集网络技术、网站制作的教学文章,定位于初、中级网站设计制作人员,提供更新、更好、更为丰富的文章,给您制作、设计带来便捷,真正成为一本建站的宝典!<br>
  我们考虑用户收集的书签难于管理,特为用户提供了网上收藏夹的功能。你只要免费注册一个用户名,就能享受网络书签给你带来网上冲浪的便捷之处。<br>
  希望支持本站的朋友能多对本站的服务提出自己的建议,帮助本站的发展,这样也能让本站更好、更方便地为大家服务;同时本站也欢迎有更好建议或特长的网友加入本站或与本站合作,开发更多新的服务项目,谢谢大家的支持!
<p>站 长 简 介: <br>
  Name:Gong Yi<br>
  Nickname:Juven (非我最爱Juventus,实为我喜欢Juventus的名字)<br>
  Live:Wuxi Jiangsu China<br>
  MSN:juven4cn@msn.com<br>
  Oicq:21821964<br>
  Software:Dreamweaver、Fireworks、Flash、Photoshop、ASP、CSS、HTML …<br>
  Love:Internet、Game、Football(FIFA)、Music …</p>
<p>  Name:Zhang Min<br>
  Nickname:Simon<br>
  Live:Hongkong China<br>
  Oicq:46066248<br>
  Software:Photoshop、Flash、Coreldraw、Freehand、3dmax …<br>
  Love:CS、传奇 …</p>
<p>  Name:Bi Hong Liang<br>
  Nickname:亮子<br>
  Live:Shenyang Liaoning China<br>
  Oicq:46009833<br>
  Software:Dreamweaver、Fireworks、Flash、Photoshop、corelDRAW …<br>
  Love:Internet、Music、volleyball、art …</p>
</font></td>
</tr>
</tbody>
</table>

</div>
  说明:代码中,红色字体部分就是引入的滚动条效果图片,灰色字体部分是表格,即930_demo.htm的文字内容部分。

  滚动条所含图片压缩包下载: http://it365cn.com/upload/930.rar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值