使用jquery显示部分图像

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

现在它也应该分解分数部分的图标，可能是小数，但可能是四分之一。例如，23.43-->23个图标和图标水平部分的0.4（或0.5，如果四分之一），4.3-->4个图标和图标x部分的0.3（或0.25），39.79-->39个图标和图标x部分的0.8（或0.75），等等

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

编辑：这里是我正在尝试做的事情的图片

---

我个人会将此图像设置为

的

背景图像，并将
宽度设置为图像宽度的倍数（例如23.4*宽度），将
背景重复设置为
重复-x

如果您明确拒绝使用背景，则将
溢出设置为
隐藏
，并在JS中使用
循环
来
文档.createElement
在
div中指定数量的
图像
s。这样，由于溢出，最后一个可以“半可见”

编辑：

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

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

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,
});

要解决此问题，需要设置换行符。例如，如果您的图像是21px宽，那么假设一行中的最大图像数是20（840px宽）

假设你需要放置75.5张图片

首先，创建一个宽度为840px的
div
，并将
75.5-（75.5%20）
图像放在那里。它应该创建三行图像。然后将其余的（
75.5%20=15.5=>16个图像
）放入一个新的
div
，宽度为
15.5*21
px，并像前面的例子一样隐藏溢出。同样，最后的第16幅图像将是半可见的

编辑2:

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

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

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,
});

如果图像的宽度不同，可以采用一种新技术：只使用一个宽度固定的
div
。把所有的图片都放进去。在最后一幅图像后添加一个新的
div
，该图像背景不透明，颜色和页面的颜色相同：


HTML:

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

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

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,
});

JS:

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

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

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,
});

var计数=75.5，
ceil=数学.ceil（计数），
图像处理http://jsfiddle.net/img/logo.png',
叠加=$（“#叠加”），
包装器=$（“#包装器”），
hide=ceil-count；
对于（变量i=0；i
由于您正在进行可视化，您是否也可以将您的问题可视化，即添加一些图片？我不太清楚。我喜欢这个，它可以工作，但我有一个问题：如果我有59.7作为一个值，我可以得到1253.7px的宽度；这并没有很好地打破网页上！你可以对它进行四舍五入，甚至将它放在地板上（
Math.round（）
或
Math.floor（）
，如果你在JS中这样做的话）。不，我的意思是，在这种情况下，我得到的div是1253.7px，它只会溢出周围div的边界。结果可能会更多（例如78.3），这就给了我一个带有huuuuge宽度的div，它不适合屏幕。谢谢你，你的解决方案当然有效，但我希望jquery会更简单一些（比如在img标签上只设置分数1的宽度），因为在同一页面上，我有几个不同宽度的不同图标的可视化效果，因此，这意味着每一次可视化都需要不同的计算。想一想，也许你的方法是唯一可行的：）嗯，如果图像的宽度不同，我可以用另一种方法…：D