0

ビジュアライゼーションを行っていますが、計算は分数で返されることがあります (例: 23.43、4.3、39.79、...)。結果の整数ごとにアイコンを表示する必要があります (例: 23 -> 23 アイコン、4 -> 4 アイコン、39 -> 39 アイコン)。

これで、分数部分のアイコンも分割されます。おそらく小数ですが、場合によっては 4 分の 1 になります。たとえば、23.43 --> 23 個のアイコンとアイコンの水平部分の 0.4 (または 4 分の 1 の場合は 0.5)、4.3 --> 4 個のアイコンとアイコンの x 部分の 0.3 (または 0.25)、39.79 --> 39 個のアイコンとアイコンの x 部分の 0.8 (または 0.75) など。

どうすればこれを行うことができますか? css で背景を使用するいくつかのアプローチを見ましたが、それはまさに私が必要としているものではないようです。私はそれを行ういくつかのjqueryの方法を好むでしょう。

編集：ここで私がやろうとしていることのイメージ

ここに画像の説明を入力

4

1 に答える 1

1

私は個人的にこの画像をbackground-imagea<div>に設定widthし、画像の幅の倍数 (例: 23.4 * 幅) に設定background-repeatしrepeat-xます。

バックグラウンドの使用を明確に拒否する場合は、 を に設定しoverflow、JS でhiddenaを内の指定された数のに設定します。このように、オーバーフローのおかげで、最後のものは「半分見える」ものになる可能性があります。loopdocument.createElementimagediv

編集：

これを解決するには、改行を設定する必要があります。たとえば、画像の幅が 21 ピクセルであることを確認した場合、1 行の画像の最大数が 20 (幅 840 ピクセル) であるとします。

では、75.5 枚の画像を配置する必要があるとしましょう。

まず、div幅 840px のを作成し、75.5 - (75.5 % 20)そこに画像を配置します。3 行の画像を作成する必要があります。次に残りの部分 ( ) を幅px75.5 % 20 = 15.5 => 16 imagesの newに配置し、前のケースと同様にオーバーフローを非表示にします。ここでも、最後の 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 に答える