waitbar.htc

HTC,demo WEB用于。 超大型

<public:component name="WaitBar" urn="WaitBar">
<public:property name="direction" value="h"/>
<public:property name="speed" value="2"/>
<public:property name="blockSpace" value="2"/>
<public:property name="blockSize" value="10"/>
<public:property name="blockNum" value="5"/>
<public:property name="top" value="0"/>
<public:property name="left" value="0"/>
<public:property name="width" value="100"/>
<public:property name="height" value="16"/>
<public:property name="borderColor" value=""/>
<public:property name="blockColor" value=""/>
<public:property name="visibility" value="false" put="putVisibility"/>
<public:property name="refresh" put="refresh"/>
<public:property name="init" put="initialize"/>
<public:property name="start" put="start"/>
<public:method name="start"/>
<public:method name="stop"/>
<script language="JScript">
<!--
/*
减少cpu占有量的因素：
blockSize尽量小,blockNum不要大于8,blockSpace影响较小(最好尽量小)
speed越小越占用资源,所以尽量的大
以上的"尽量"是以满足视觉效果为基本点的。
*/
var objBG,objMarquee,objBlocks; //背景圆角框,滚动区域,滚动块
var vTimeout; //定时器
var vMax,vMin; //滚动块的最大和最小左(上)Left
var vVisibility = false;

function start(){ //开始滚动
  stop(); //先停止下来,防止多个定时器启动
  if(direction == "h"){
    objBlocks.movedirection = 1;
    moveHLoop();
  }
  else{
    objBlocks.movedirection = 1;
    moveVLoop();
  }
}

function moveHLoop(){ //水平滚动
  var vBlocksLeft = objBlocks.style.pixelLeft;
  if(objBlocks.movedirection == 1){
    objBlocks.style.pixelLeft = vBlocksLeft + 2;
    if(vBlocksLeft > vMax) objBlocks.movedirection = 0;
  }
  else{
    objBlocks.style.pixelLeft = vBlocksLeft - 2;
    if(vBlocksLeft < vMin) objBlocks.movedirection = 1;
  }
  vTimeout = window.setTimeout(moveHLoop,speed * 10);
  //vTimeout = window.setInterval(moveHLoop,speed * 10);
  
}

function moveVLoop(){ //垂直滚动
  var vBlocksTop = objBlocks.style.pixelTop;
  if(objBlocks.movedirection == 1){
    objBlocks.style.pixelTop = vBlocksTop + 2;
    if(vBlocksTop > vMax) objBlocks.movedirection = 0;
  }
  else{
    objBlocks.style.pixelTop = vBlocksTop - 2;
    if(vBlocksTop < vMin) objBlocks.movedirection = 1;
  }
  vTimeout = window.setTimeout(moveVLoop,speed * 10);
  //vTimeout = window.setInterval(moveVLoop,speed * 10);
}

function stop(){ //停止滚动,复位
  if(direction == "h") objBlocks.style.pixelLeft = -((blockSize + blockSpace) * blockNum + 20);
  else objBlocks.style.pixelTop = -((blockSize + blockSpace) * blockNum + 20);
  window.clearTimeout(vTimeout);
}

function createMoveBlock(argNum){ //创建滚动块,数量由blockNum决定
  var objFill;
  var objBlock = window.document.createElement("<v:rect style='position:absolute;' stroked='false'></v:rect>");
  //objFill = element.document.createElement("<v:fill color='#FFFFFF'/>");
  //objBlock.insertBefore(objFill);
  objBlocks.insertBefore(objBlock);
  objBlock.innerHTML = "<v:fill/>";

  with(objBlock){
    fillcolor = blockColor;

    all.tags("fill")(0).color2 = "#FFFFFF";
    all.tags("fill")(0).type = "gradient";
    all.tags("fill")(0).focus = 25;
    /*    
    fillcolor2 = "#FFFFFF";
    filltype = "gradient";
    all.tags("fill")(0).focus = 25;*/
  }
  if(direction == "h"){ //水平
    with(objBlock){
      style.pixelWidth = blockSize;
      style.pixelHeight = element.height - 4;
      style.pixelLeft = argNum * (blockSize + blockSpace);
      style.pixelTop = 2;
    }
  }
  else{ //垂直
    with(objBlock){
      all.tags("fill")(0).angle = 90;
      style.pixelWidth = element.width - 4;
      style.pixelHeight = blockSize;
      style.pixelLeft = 2;
      style.pixelTop = argNum * (blockSize + blockSpace);
    }
  }
}

function searchColor(argProperty,argCSS,argConst){ //从htc属性值、css属性和常量中取颜色值(优先级从左到右)
  if(argProperty) return argProperty;
  else if(argCSS) return argCSS;
  else return argConst;
}

function initColor(){ //初始化颜色
  var objColorSpan,objColor;

  var cBorderColor = "#9CB2F7";
  var cBlockColor = "#6B8EF7";

  objColorSpan = window.document.createElement("<span class='sc_wb_color'></span>");
  objColor = element.appendChild(objColorSpan).style;
  borderColor = searchColor(borderColor,objColor.borderColor,cBorderColor);
  blockColor = searchColor(blockColor,objColor.blockColor,cBlockColor);

  objBG.strokecolor = borderColor;
}

function refresh(){ //定位和记录颜色
  with(element){
    style.pixelLeft = left;
    style.pixelTop = top;
    style.pixelWidth = width;
    style.pixelHeight = height;
  }

  with(objBG){ //背景方框
    style.pixelWidth = element.width - 1;
    style.pixelHeight = element.height - 1;
  }

  if(direction == "h"){
    with(objMarquee){ //移动区域(水平)
      style.pixelWidth = element.width - 6;
      style.pixelHeight = element.height;
      style.pixelLeft = 3;
      style.pixelTop = 0;
    }
    vMax = width + 20; //滚动块的最小left
  }
  else{
    with(objMarquee){ //移动区域(垂直)
      style.pixelWidth = element.width;
      style.pixelHeight = element.height - 6;
      style.pixelLeft = 0;
      style.pixelTop = 3;
    }
    vMax = height + 20; //滚动块的最小top
  }
  vMin = -((blockSpace + blockSize) * blockNum + 20); //滚动块的最小left(top)
  initColor(); //初始化颜色

  objBlocks.innerHTML = ""; //清空原有滚动块
  for(i = 0; i < blockNum; i++){ //创建滚动块
    createMoveBlock(i);
  }

  stop();
}

function initialize(){
  var i;

  width = parseInt(width);
  height = parseInt(height);
  blockSize = parseInt(blockSize);
  blockNum = parseInt(blockNum);
  blockSpace = parseInt(blockSpace);
  speed = parseInt(speed);


  //背景
  objBG = window.document.createElement("<v:roundrect arcsize='0.2' style='position:absolute;top:0px;left:0px;' filled='false'></v:roundrect>");
  element.insertBefore(objBG);

  //滚动区域
  objMarquee = window.document.createElement("<div class='sc_wb_marquee'></div>");
  element.appendChild(objMarquee);

  //被移动块(必须使用div,如果使用<v:group>则cpu将会很累,占用比达到50%,而div只为3%)
  objBlocks = window.document.createElement("<div class='sc_wb_blocks'></div>");
  objMarquee.insertBefore(objBlocks);
  refresh();
  putVisibility(vVisibility);
}

function putVisibility(argVisibility){
  vVisibility = argVisibility;

  if(argVisibility.toString().toLowerCase() == "true"){
    element.style.visibility = "visible";
  }else{
    element.style.visibility = "hidden";
    stop();
  }
}

//-->
</script>
</public:component>