用jquery显示图像的一部分

Question

我正在进行可视化，计算可以返回分数（例如23.43,4.3,39.79，...）。我需要在结果中显示每个整数的图标（例如23 - ＆gt; 23图标，4 - ＆gt; 4图标，39 - ＆gt; 39图标）。

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

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

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

Answer 1

我个人设置此图片为background-image的{​​{1}}，并设置<div>的图像的宽度（例如，23.4×宽）和{{1的倍数转到width。

如果您特别拒绝背景的使用情况，然后设定background-repeat到repeat-x，并使用overflow在JS为hidden指定数量的{{1}在loop内。这样，由于溢出，最后一个可以是“半可见”。

修改

要解决此问题，您需要设置换行符。例如，看到你的图像是21px宽，让我们说一行中的最大图像数是20（840px宽）。

那么让我们说，你需要放置75.5张图像。

首先，您创建宽度为840px的document.createElement并在其中放置image图像。它应该创建三行图像。然后，将其余部分（div）放入宽度为div px的新75.5 - (75.5 % 20)中，并像上一种情况一样隐藏溢出。同样，最后的第16个图像将是一半可见。

编辑2：

如果图像的宽度不同，可能会有一种新技术：只使用一个75.5 % 20 = 15.5 => 16 images，其宽度固定为您喜欢的任何内容。将所有图像放入其中。在最后div之后添加一个新的15.5 * 21，其中包含您网页颜色的不透明背景：

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

<强> HTML：

div

<强> CSS：

div

<强> JS：

image