你如何写一个动态值

debugcn 发表于 Dev

保罗·肯德尔

我正在动态地将两个值集写入一个框中。

问题是我需要其中一个值坐在另一个值上

如果我告诉你我的意思可能会更容易

以下两张图片均显示了动态生成的“百分比进度条”。问题是左边的图像被剪短了，因为百分比仅为17％

因此，解决该问题的唯一方法是将17％的“水煮”偷偷带到酒吧中间。

下面是我用来放置数字的代码

在此处输入图片说明

<div class="container"><div class="progressbar"></div></div>

function setProgressOne(progress, product)
{             
    var progressBarWidth = progress*$(".container").width()/ 100;  
    $(".progressbar").width(progressBarWidth).html(progress + "% " + product);
}

我试图更改代码以使百分比数字与蓝色封闭符分开放置，但所做的只是消除了颜色。

function setProgressOne(progress, product)
{             
    var progressBarWidth = progress*$(".container").width()/ 100;  
    $(".progressbar").width(progressBarWidth);

    $(".progressbar").html(progress + "% " + product);
}

这就是我调整上面的代码时发生的情况。

在此处输入图片说明

罗里·麦克罗森（Rory McCrossan）

一个可能的解决方案是让2个div元素包含标签。一个出现在进度条“下方”，另一个出现在“进度条”上方。每个字体的样式都可以使文本具有不同的样式，以使其更易于阅读。然后，您可以clip在上div使用CSS以适应进度栏的宽度。像这样的东西：

<div class="container">
    <div class="message message-under"></div>
    <div class="progressbar"></div>
    <div class="message message-over"></div>
</div>

.container {
    border-radius: 5px;
    border: 1px solid #CCC;
    position: relative;
    height: 30px;
}
.message {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 30px;
}
.message-under {
    color: #333;
    z-index: 5;
}
.progressbar {
    background-color: #C00;
    color: #FFF;
    border-radius: 5px;
    height: 100%;
    position: absolute;
    z-index: 10;
}
.message-over {
    color: #FFF;
    z-index: 15;
}

function setProgressOne(progress, product) {
    var progressBarWidth = progress * $(".container").width() / 100;
    $(".progressbar").width(progressBarWidth);
    $('.message-over').css('clip', 'rect(0px, ' + progressBarWidth + 'px, 30px, 0px)');
    $('.message').html(progress + "% " + product);
}

工作小提琴

更新

这是另一个演示小提琴：http : //jsfiddle.net/0LuLhqmb/1/

请注意，我使进度栏可拖动，因此您可以更清楚地看到从一种文本样式到另一种文本样式的过渡效果。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。