CSS能不能改变滚动条的背景图

你可以将微软的滚动条不让显示,而自己设计一个替代品出来。
利用图片和js。
提供思路:
在显示滚动条的地方显示一个“滚动条底层图片”,然后在“滚动条底层图片”的上方显示一个可以拖动的“滚动条图片”,并且在拖动滚动条图片时同时用js实现滚动页面即可。具体的定位做准确,就可以了。

用dw的DragLayer制作一个随意拖动的层结合iframe可以做成定制的滚动条,具体方法比较麻烦
首先下载http://darkvn.top263.net/swin/swindow.zip。(里面包括要用到的swindow.js脚本文件和几个示例文件。)然后准备好两张图,一张是整个窗口背景,一张是滚动条。最好是做成背景透明的gif格式图片,这样窗口就可以是不规则的形状。要保证有以下几个部分:1、iframe显示区,矩形;2、滚动条区,矩形;3、控制按钮:最小化、隐藏、向上滚动、向下滚动。
图片准备好了以后,就可以打开Dw开始做了。
  Ctrl+N新建一个页面,在菜单里选择Insert-Layer插入一个层,将它的名称(layerId)改为swin,并把他的高度和宽度都拉大一点,方便以后往里面插入其他元素。在属性面版里设置它overflow属性为hidden,然后在层内插入前面准备好的背景图。
  接下来的步骤很关键,也最容易出错。所以请大家看仔细了。
  1.先将光标定位到层(swin)内,定位光标到层内的方法是:将鼠标移动到层的范围内,当鼠标形状变为I(文字输入)的时候,单击鼠标左键。定位光标后,在dw菜单中选择Insert-Layer,注意要从菜单中插入层,而不是通过object面版来插入。因为这个层是用来放置iframe的,它的位置要跟随主层背景一起移动。将这个层的名称改为framebox,并调整他的位置大小,使它正好覆盖住背景图的iframe显示区域。
  2.再次将光标定位到层(swin) 内,用跟上面相同的方法再插入一层,这个层是用来控制滚动条的,把它的名称改为scrollbar,并调整好它的位置大小,使她正好盖住背景图的滚动条区。
  3.现在要将光标定位到刚插入的scrollbar层内,在这个层内再插入一层,方法跟上面一样,把它的名称改为scrollbox,这个层就是滚动条了。选中这个层(scrollbox)在属性面版中设置它的背景图片(Bg Image)为开始准备好的第二张滚动条图片。并调整层的大小为图片的大小,并设置层的left,及top属性都为0;
可是现在的窗口还不能动,也没有任何内容,因为还没有把javascript脚本和iframe加进来,把下载的swindow.js文件拷贝到网页所在的目录,然后将dw切换到原代码编辑状态,在<body>标记前加入以下代码:
<script src="swindow.js"></script>
在代码中找到这样一行:
<div id="framebox" style="position:absolute; width:…… "></div>
这一行是用来定义iframe所在层的,在<div id="framebox" style="…">后加入以下代码:
<iframe id=scrollfrm src="ttt.htm" frameborder=no scrolling=no width=100% height=100%></iframe>
其中ttt.htm是你自己要显示的页面。

 

---------------------------
用图片
window.scrollBy(x,y)
来实现
 
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值