1

特定の方法でいくつかの数値を表示するように求められました-画像を参照してください:

ここに画像の説明を入力

画像でわかるように、フォントの一部を少し暗くするために、各数字の上半分にある種の灰色のオーバーレイが必要です。(少なくとも、半透明のオーバーレイを追加することで、これを解決できると思います。)

これらの数値を 1 つの xml ノードから取得し、次のスクリプトで数値を分割します。

var text = $("div.balance_number span");
var characters = $("div.balance_number").text().split("");
$("div.balance_number").empty();
$.each(characters, function (i, el) {
    $("div.balance_number").append("<span>" + el + "</span")
});
$("div.balance_number span").each(function (index) {
    var pt = $(this).text();
    if (pt == ",") {
        $(this).addClass("empty")
    }
});

結果は以下のフィドルに示されています。数字にオーバーレイを追加するタスクを解決するにはどうすればよいですか? それとも別の方法で解決できますか？

ここでフィドルを作成しました。

4

2 に答える 2

5

http://jsfiddle.net/tyuHb/5/

<div class="balance">
    <div class="balance_number">
        <span><span></span>9</span>
        <span><span></span>5</span>
        <span class="empty">,</span>
        <span><span></span>3</span>
        <span><span></span>5</span>
    </div>
</div>

CSS:

.balance_number > span {         /* note the ">" */
    position:relative;
    /* all other code ...*/

と：

.balance_number span > span {    /* note the ">" */
    position:absolute;
    left:0;
    height:24px;
    width:30px;
    background:rgba(0,0,0,0.4);
}
于 2013-06-07T13:36:05.097 に答える
1

これがあなたが作業するライブコードであると仮定すると、次のようなことを試すことができますか?

HTML

<div class="balance">
  <div class="balance_number">
    <div class="left">
        <div class="dark-left"></div>  
        <span>9</span>
        <span>5</span>
    </div>
    <span class="empty">,</span>
    <div class="right">
        <div class="dark-right"></div>
        <span>3</span>
        <span>5</span>
    </div>
  </div>
</div>

CSS

.left, .right {
    position: relative;
    width: 62px;
    float: left;
}
.dark-left, .dark-right {
    width: 62px;
    height: 25px;
    position: absolute;
    background-color: rgba(0,0,0,0.3);
}
于 2013-06-07T13:36:22.353 に答える