您当前的位置：飞翔学院-IT中国 → 编程开发 → JavaScript → 文章内容

进度指示文字自适应背景

作者:佚名来源:不详发布时间:2008-5-24 10:15:48

看了卡拉 OK 字幕效果，让我们来看看两个层的另一种应用－－进度条，这里主要看进度条的进度指示文字自适应背景，假如进度条是白色，指示文字为黑色，已经进行了的部分为蓝色，指示文字为白色，那么在进度条为 50% 时，应该文字 5 和 0 的左半边为白色，0 的右半边和百分号为黑色。还是通过两个层来实现这个效果，除了卡拉 OK 字幕效果中提出的注意事项外，这里还需要注意：

利用 padding 将指示文字确定在进度条中央附近。
在10% 以下的进度指示时，在文字前面添加两个空格，在 100% 以下的进度指示时，在文字前面添加一个空格，保证它们和 100% 的情况下，百分号的位置不变。
由于加了边框，上层的 top 和 left 属性值有改变。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>进度指示文字自适应背景</title></head><body><div><a href="http://www.52z.com/" target="_blank">飞翔下载 www.52z.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a><hr>在进度指示为40%~60%时，请密切注视一半白一半黑的文字。</div><div style="width:102px;"> <div id="bv" style="padding-left:38px;border:1px solid #000000;line-height:150%;font-size:14px;"></div> <div id="av" style="position:relative;top:-22px;left:1px;overflow:hidden;padding-left:38px;background-color:#0000FF;line-height:150%;font-size:14px;color:#FFFFFF;" nowrap></div></div><script type="text/javascript" language="javascript"></script></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

打印文档
推荐好友
返回顶部
增大字体
减少字体

上一篇文章：VC++8.0 (VC++ 2005 Express)
下一篇文章：卡拉 OK 字幕效果

分类推荐

热点文章

·进度指示文字自适应背景

进度指示文字自适应背景

分类推荐

热点文章

精采文章

精采文章