0

我正在做一个可视化，计算可以返回分数（例如 23.43、4.3、39.79，...）。我需要为结果中的每个整数显示图标（例如 23 -> 23 个图标，4--> 4 个图标，39 -> 39 个图标）。

现在它还应该打破分数部分的图标，可能是小数，但可能会缩小到四分之一。例如 23.43 --> 23 个图标和 0.4（或 0.5，如果四分之一）图标的水平部分，4.3 --> 4 个图标和 0.3（或 0.25）图标的 x 部分，39.79 --> 39 个图标和图标 x 部分的 0.8（或 0.75），以此类推。

我怎么能这样做？我看到了一些在 CSS 中使用背景的方法，但这看起来并不是我所需要的。我更喜欢一些 jquery 的方式来做到这一点。

编辑：这里是我想要做的事情的图像

在此处输入图像描述

4

1 回答 1

1

我个人会将此图像设置background-image为 a <div>，并设置width为图像宽度的倍数（例如 23.4 * 宽度）background-repeat和repeat-x.

如果你特意拒绝使用背景，那么将JS 中的overflowtohidden和 use a设置为. 这样，由于溢出，最后一个可以是“半可见”的。loopdocument.createElementimagediv

编辑：

为了解决这个问题，您需要设置换行符。例如，看到您的图像是 21px 宽，假设一行中的最大图像数是 20（840px 宽）。

假设您需要放置 75.5 张图像。

首先，您创建一个div宽度为 840 像素的图像并将75.5 - (75.5 % 20)图像放在那里。它应该创建三行图像。然后你把剩下75.5 % 20 = 15.5 => 16 images的（同样，最后的第 16 张图像将是半可见的。div15.5 * 21

编辑2：

如果图像的宽度发生变化，可以采用一种新技术：只使用一个div固定宽度的图像来放置任何你喜欢的东西。将所有图像放入其中。div在页面颜色的最后一个image不透明背景之后添加一个新的：

http://jsfiddle.net/qTb8T/1/

HTML：

<div id="wrapper">
    <div id="overlay">
</div>

CSS：

#wrapper {
     background: blue;
    width: 700px;
}
#overlay {
    background: blue;
    display: inline-block;
    position: relative; 
}

JS：

var count = 75.5,
    ceil = Math.ceil(count),
    image = 'http://jsfiddle.net/img/logo.png',
    overlay = $('#overlay'),
    wrapper = $('#wrapper'),
    hide = ceil - count;

for(var i = 0; i < ceil; i++) {
    var img = document.createElement('img');
    img.src = image;
    wrapper.prepend(img);
}

overlay.css({
    'width': img.clientWidth,
    'left': -img.clientWidth * hide,
    'height': img.clientHeight,
});
于 2013-04-18T14:55:32.223 回答