UNIRRY

WEBデザインとホロスコープと宇宙のブログ

jQueryでテキスト数字を画像文字に置き換えてみた

imhnumber

テキスト数字を、画像文字に変更する仕組みをやってみたかったのでやってみました。
いつもは、Arialフォントでやっていたのですが、画像のほうが見た目がよいとかがあるので。Webフォント使えばそれでいい気もしますけども^○^

テキスト数字を画像文字に置き換える

js

$(function () {
    //数字テキストを変数に格納
    var numb = $(".numb").text();
    
    //とりあえずdivの中身を空にする
    $(".numb").empty();
    
    //1文字づつ配列に格納する
    var numarr = numb.split("");
    
    //spanタグで囲ってdiv内にappendする
    var newnum = [];
    for ( i=0; i < numarr.length; i++ ) {
      $(".numb").append("<span class='num" + numarr[i] + "'>" + numarr[i] + "</span>");
    }
});

css

.numb {
height: 47px;
}
.numb span {
text-indent: -9999px;
height: 47px;
padding: 0 3px;
float: left;
display: block;
}
.numb span.num1 {
background: url(./1.jpg) no-repeat left top;
width: 21px;
}
.numb span.num2 {
background: url(./2.jpg) no-repeat left top;
width: 47px;
}
.numb span.num3 {
background: url(./3.jpg) no-repeat left top;
width: 43px;
}
.numb span.num4 {
background: url(./4.jpg) no-repeat left top;
width: 49px;
}
.numb span.num5 {
background: url(./5.jpg) no-repeat left top;
width: 43px;
}
.numb span.num6 {
background: url(./6.jpg) no-repeat left top;
width: 47px;
}
.numb span.num7 {
background: url(./7.jpg) no-repeat left top;
width: 45px;
}
.numb span.num8 {
background: url(./8.jpg) no-repeat left top;
width: 45px;
}
.numb span.num9 {
background: url(./9.jpg) no-repeat left top;
width: 46px;
}
.numb span.num0 {
background: url(./0.jpg) no-repeat left top;
width: 47px;
}

html

<div class="numb">1234567890</div>

サンプル

サンプル


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3