jquery - 动态创建图像并根据百分比填充颜色

Question

您好，我正在尝试输出如下图所示的图像，该图像会根据某个百分比值被另一幅图像覆盖。在功能方面，代码工作得很好，但我为每个图像调用相同的函数。所以，我正在尝试动态创建图像并为每个图像添加颜色 w.r.t 有百分比值。所以请给出如何执行的想法

$(function() {
  var loader_class = ".loader";
  var oLoader = {
    interval: 10,
    timer: null,
    upPerc: 0,
    upHeight: 0,
    curHeight: 0,
    step: 1,
    diff_bg: 0,
    diff_top: 0,
    size: $(loader_class).data("loader-size").split(" "),
    heightInt: 0,
    bimage: $(loader_class).data("back-image"),
    fimage: $(loader_class).data("front-image"),
    loader: $(loader_class).children('.loaded').eq(0),
    position: $(loader_class).children('.position').eq(0),
    pos_height: 0
  };
  oLoader.heightInt = parseInt(oLoader.size[1], 10);
  oLoader.pos_height = parseInt($(oLoader.position).height(), 10);

  $(loader_class).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image': 'url(' + oLoader.fimage + ')',
    'background-size': oLoader.size.join(' ')
  });
  $(oLoader.loader).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image': 'url(' + oLoader.bimage + ')',
    'background-size': oLoader.size.join(' ')
  });

  clearInterval(oLoader.timer);
  for (var i = 0; i < 3; i++) {

    oLoader.upPerc = 75;
    oLoader.upHeight = Math.ceil((oLoader.upPerc / 100) * oLoader.heightInt);
    oLoader.curHeight = parseInt($(oLoader.loader).height(), 10);
    oLoader.step = (oLoader.upHeight > (oLoader.heightInt - oLoader.curHeight) ? -1 : 1);
    oLoader.diff_bg = (oLoader.step === 1 ?
      (oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight :
      oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
    oLoader.timer = setInterval(function() {
      if (oLoader.diff_bg) {
        oLoader.diff_bg--;
        oLoader.curHeight += oLoader.step;
        $(oLoader.loader).css({
          height: oLoader.curHeight
        });
        $(oLoader.position).css({
          bottom: oLoader.diff_top
        });
      } else {
        clearInterval(oLoader.timer);
        $(oLoader.position).children('div').text(oLoader.upPerc + "%");
      }
    }, oLoader.interval);
  }

});
$(function() {
  var loader_class = ".loader1",
    control_class = ".set-loader";
  var oLoader = {
    interval: 10,
    timer: null,
    upPerc: 0,
    upHeight: 0,
    curHeight: 0,
    step: 1,
    diff_bg: 0,
    diff_top: 0,
    size: $(loader_class).data("loader-size").split(" "),
    heightInt: 0,
    bimage: $(loader_class).data("back-image"),
    fimage: $(loader_class).data("front-image"),
    loader: $(loader_class).children('.loaded').eq(0),
    position: $(loader_class).children('.position').eq(0),
    pos_height: 0
  };
  oLoader.heightInt = parseInt(oLoader.size[1], 10);
  oLoader.pos_height = parseInt($(oLoader.position).height(), 10);

  $(loader_class).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image': 'url(' + oLoader.fimage + ')',
    'background-size': oLoader.size.join(' ')
  });
  $(oLoader.loader).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image': 'url(' + oLoader.bimage + ')',
    'background-size': oLoader.size.join(' ')
  });
  clearInterval(oLoader.timer);
  oLoader.upPerc = 25;
  oLoader.upHeight = Math.ceil((oLoader.upPerc / 100) * oLoader.heightInt);
  oLoader.curHeight = parseInt($(oLoader.loader).height(), 10);
  oLoader.step = (oLoader.upHeight > (oLoader.heightInt - oLoader.curHeight) ? -1 : 1);
  oLoader.diff_bg = (oLoader.step === 1 ?
    (oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight :
    oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
  oLoader.timer = setInterval(function() {
    if (oLoader.diff_bg) {
      oLoader.diff_bg--;
      oLoader.curHeight += oLoader.step;
      $(oLoader.loader).css({
        height: oLoader.curHeight
      });
      $(oLoader.position).css({
        bottom: oLoader.diff_top
      });
    } else {
      clearInterval(oLoader.timer);
      $(oLoader.position).children('div').text(oLoader.upPerc + "%");
    }
  }, oLoader.interval);
  return false;
});

$(function() {
  var loader_class = ".loader2",
    control_class = ".set-loader";
  var oLoader = {
    interval: 10,
    timer: null,
    upPerc: 0,
    upHeight: 0,
    curHeight: 0,
    step: 1,
    diff_bg: 0,
    diff_top: 0,
    size: $(loader_class).data("loader-size").split(" "),
    heightInt: 0,
    bimage: $(loader_class).data("back-image"),
    fimage: $(loader_class).data("front-image"),
    loader: $(loader_class).children('.loaded').eq(0),
    position: $(loader_class).children('.position').eq(0),
    pos_height: 0
  };
  oLoader.heightInt = parseInt(oLoader.size[1], 10);
  oLoader.pos_height = parseInt($(oLoader.position).height(), 10);

  $(loader_class).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image': 'url(' + oLoader.fimage + ')',
    'background-size': oLoader.size.join(' ')
  });
  $(oLoader.loader).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image': 'url(' + oLoader.bimage + ')',
    'background-size': oLoader.size.join(' ')
  });
  clearInterval(oLoader.timer);
  oLoader.upPerc = 50;
  oLoader.upHeight = Math.ceil((oLoader.upPerc / 100) * oLoader.heightInt);
  oLoader.curHeight = parseInt($(oLoader.loader).height(), 10);
  oLoader.step = (oLoader.upHeight > (oLoader.heightInt - oLoader.curHeight) ? -1 : 1);
  oLoader.diff_bg = (oLoader.step === 1 ?
    (oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight :
    oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
  oLoader.timer = setInterval(function() {
    if (oLoader.diff_bg) {
      oLoader.diff_bg--;
      oLoader.curHeight += oLoader.step;
      $(oLoader.loader).css({
        height: oLoader.curHeight
      });
      $(oLoader.position).css({
        bottom: oLoader.diff_top
      });
    } else {
      clearInterval(oLoader.timer);
      $(oLoader.position).children('div').text(oLoader.upPerc + "%");
    }
  }, oLoader.interval);
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <div class="col-sm-2">
    <div class="loader" data-loader-size="200px 200px" data-back-image="./star1.png" data-front-image="./star3.png">
      <div class="loaded"></div>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="loader1" data-loader-size="200px 200px" data-back-image="./ImageS1.png" data-front-image="./ImageS2.png">
      <div class="loaded"></div>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="loader2" data-loader-size="100px 100px" data-back-image="./pic_bulboff.gif" data-front-image="./pic_bulbon.gif">
      <div class="loaded"></div>
    </div>
  </div>

  <div class="col-sm-2">
  </div>


</form>

Answer 1

工作正常图像正在动态创建并且值分别附加到图像。欢呼..!!!

        $(function () {
            var imgArray = new Array();

            imgArray[0] = new Image();
            imgArray[0].src = 'ImageS1.png';

            imgArray[1] = new Image();
            imgArray[1].src = 'ImageS2.png';

            imgArray[2] = new Image();
            imgArray[2].src = 'ImageS11.png';

            imgArray[3] = new Image();
            imgArray[3].src = 'ImageS12.png';


            for (var i = 0; i <= 3; i += 2) {
                $('<div>', {
                    'class': 'Dynamicdiv' + i.toString(),
                    'data-loader-size': "100px 100px",
                    'data-back-image': imgArray[i].src,
                    'data-front-image': imgArray[i + 1].src

                }).appendTo($('#phani'));

                $('<div>', {
                    'class': 'loaded' + i.toString(),

                }).appendTo($('.Dynamicdiv' + i.toString()));

                phani();

            }

            function phani() {

                var loader_class = '.Dynamicdiv' + i.toString();

                var oLoader = {
                    interval: 30,
                    timer: null,
                    upPerc: 0,
                    upHeight: 0,
                    curHeight: 0,
                    step: 1,
                    diff_bg: 0,
                    diff_top: 0,
                    size: $(loader_class).data("loader-size").split(" "),
                    heightInt: 0,
                    bimage: $(loader_class).data("back-image"),
                    fimage: $(loader_class).data("front-image"),
                    loader: $(loader_class).children('.loaded' + i.toString()).eq(0),
                    position: $(loader_class).children('.position').eq(0),
                    pos_height: 0
                };
                oLoader.heightInt = parseInt(oLoader.size[1], 10);
                oLoader.pos_height = parseInt($(oLoader.position).height(), 10);

                $(loader_class).css({
                    width: oLoader.size[0],
                    height: oLoader.size[1],
                    'background-image': 'url(' + oLoader.fimage + ')',
                    'background-size': oLoader.size.join(' ')
                });
                $(oLoader.loader).css({
                    width: oLoader.size[0],
                    height: oLoader.size[1],
                    'background-image': 'url(' + oLoader.bimage + ')',
                    'background-size': oLoader.size.join(' ')
                });
                clearInterval(oLoader.timer);
                oLoader.upPerc = 50
                oLoader.upHeight = Math.ceil((oLoader.upPerc / 100) * oLoader.heightInt);
                oLoader.upHeight = (oLoader.upHeight > oLoader.heightInt ? oLoader.heightInt : oLoader.upHeight);
                oLoader.curHeight = parseInt($(oLoader.loader).height(), 10);
                oLoader.step = (oLoader.upHeight > (oLoader.heightInt - oLoader.curHeight) ? -1 : 1);
                oLoader.diff_bg = (oLoader.step === 1 ?
                    (oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight :
                     oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
                oLoader.diff_top = parseInt($(oLoader.position).css('bottom'), 10);
                oLoader.timer = setInterval(function () {
                    if (oLoader.diff_bg) {
                        oLoader.diff_bg--;
                        oLoader.curHeight += oLoader.step;
                        oLoader.diff_top += -oLoader.step;
                        oLoader.calc_perc = Math.ceil((oLoader.diff_top + oLoader.pos_height) / oLoader.heightInt * 100);
                        oLoader.calc_perc = (oLoader.calc_perc < 0 ? 0 : oLoader.calc_perc);
                        oLoader.calc_perc = (oLoader.calc_perc > 100 ? 100 : oLoader.calc_perc);
                        $(oLoader.loader).css({ height: oLoader.curHeight });
                        $(oLoader.position).css({ bottom: oLoader.diff_top });
                        $(oLoader.position).children('div').text(oLoader.calc_perc + "%");
                    } else {
                        clearInterval(oLoader.timer);
                        $(oLoader.position).children('div').text(oLoader.upPerc + "%");
                    }
                }, oLoader.interval);
            }

        });

     <div id="phani" ">
        </div>