看了卡拉 OK 字幕效果,让我们来看看两个层的另一种应用--进度条,这里主要看进度条的进度指示文字自适应背景,假如进度条是白色,指示文字为黑色,已经进行了的部分为蓝色,指示文字为白色,那么在进度条为 50% 时,应该文字 5 和 0 的左半边为白色,0 的右半边和百分号为黑色。还是通过两个层来实现这个效果,除了卡拉 OK 字幕效果中提出的注意事项外,这里还需要注意:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>进度指示文字自适应背景</title> </head> <body> <div> <a href="http://www.itpow.com/" target="_blank">ITPOW www.itpow.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"> <!-- var av = document.getElementById("av"); var bv = document.getElementById("bv"); function MusicGo() { var width = parseInt(av.style.width); if (width < 100) { width++; } else { width = 0; } av.style.width = width + "px"; if (width >= 100) { av.innerHTML = "100%"; bv.innerHTML = "100%"; } else if (width >= 10) { av.innerHTML = " " + width + "%"; bv.innerHTML = " " + width + "%"; } else { av.innerHTML = " " + width + "%"; bv.innerHTML = " " + width + "%"; } } av.style.width = "0px";//由于前面样式表中没有指定,所以在 JavaScript 中一定要指定 setInterval("MusicGo();", 50); --> </script> </body> </html>[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
创建于2005年 渝ICP备05010272号-1
电邮:cftea@126.com