千一控件-进度条高级应用(3)

  • 千一控件-进度条高级应用(1)
  • 千一控件-进度条高级应用(2)
  • 千一控件-进度条高级应用(3)
  • 千一控件-标签控件
  • 千一控件-零选列表框
  • 千一控件-树形菜单
  • 千一控件-级联菜单
  • 千一控件-布告菜单
  • 千一控件-布告菜单
    应用技巧
  • 千一控件-列表框
  • 千一控件-页面菜单指示器
  • 千一控件-页面菜单指示器
    v2.0
  • 千一控件-页面内容查找
  • 千一控件-DatePicker
    v1.2
  • 千一控件-图片预览器
  • 千一控件-TypeExhibition
    v2.0
  • 千一控件-LinkList v1.0
    alpha
  • 千一控件-LinkLoader
    v1.0
  • 千一控件-下拉列表框
  • 千一控件-Animation

请参阅:

  • 千一控件-进度条
  • 千一控件-进度条高级应用(1)
  • 千一控件-进度条高级应用(2)
  • 千一控件-进度条高级应用(3)

 

本应用是高级应用(2)的扩展,只需要三个步骤。

一、制作或选取一张图片作为进度条样式。

二、在 Photoshop 中将第一步的图片去色,以作为背景图片。

三、在原来的调用代码的 Create
之后
增加代码,形成完整代码如下,其中红色为新增加的内容,3.jpg、3Bg.jpg
为第一、二步中所做的图片,请确认地址。

<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=gb2312″>
<title>千一控件——进度条</title>
</head>

<body>

<div id=”progress”></div>
<div><input type=”button” value=”重新演示”
onclick=”javascript:progress.SetPos(0);” /></div>

<script type=”text/javascript” language=”javascript”
src=”;
<script type=”text/javascript” language=”javascript”>
<!–
//千一网络 www.itpow.com

var progress = new CProgress(“progress”, 0, 100, 0);
progress.progressWidth = 300;
progress.progressHeight = 70;
progress.Create();

progress.progressId.style.backgroundImage =
“url(”)”;
progress.progressId.style.backgroundPosition = “center left”;
progress.progressId.style.backgroundRepeat = “no-repeat”;
progress.barId.style.background = “none”;
progress.barId.style.backgroundImage =
“url(”)”;
progress.barId.style.backgroundPosition = “center left”;
progress.barId.style.backgroundRepeat = “no-repeat”;

setInterval(“progress.Inc();”, 10);
//–>
</script>

</body>

</html>

  • 千一控件-进度条高级应用(1)
  • 千一控件-进度条高级应用(2)
  • 千一控件-进度条高级应用(3)
  • 千一控件-标签控件
  • 千一控件-零选列表框
  • 千一控件-树形菜单
  • 千一控件-级联菜单
  • 千一控件-布告菜单
  • 千一控件-布告菜单
    应用技巧
  • 千一控件-列表框
  • 千一控件-页面菜单指示器
  • 千一控件-页面菜单指示器
    v2.0
  • 千一控件-页面内容查找
  • 千一控件-DatePicker
    v1.2
  • 千一控件-图片预览器
  • 千一控件-TypeExhibition
    v2.0
  • 千一控件-LinkList v1.0
    alpha
  • 千一控件-LinkLoader
    v1.0
  • 千一控件-下拉列表框
  • 千一控件-Animation

发表评论

电子邮件地址不会被公开。 必填项已用*标注