在网站前端的工作中，我们一直在做这样一件事情，怎么更好的去还原UI的设计稿，怎么满足PM的交互需求。
为了页面的美观，很多时候UI设计师会考虑使用一些特殊字体来代替页面上的数字符号，来达到一种理想的效果。
然而此时，前端工程师却总想用一种字体来代替这些好看的数字，当然了，我们也知道用图片的美观性。
怎么让页面快速的实现UI设计的效果，又能实现页面内容添加时的快速高效？
在这里，我们用下面JS来实现想要的效果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
numSkin = function(obj , strBox){ $num = $(obj); $num.each(numObj); function numObj(){ var numVal = $(this).find(strBox).html().toString(); if(numVal.length == 0) return false; $(this).find(strBox).remove(); $(this).find('em').remove(); var numBox = ''; for(var i=0; i <= numVal.length - 1; i++) { var numInfo = numVal[i]; if(numVal[0] === undefined) numInfo = numVal.charAt(i); switch (numInfo){ case '0': numBox += "<i class='JS-base-num JS-num-0' alt='0'></i>"; break; case '1': numBox += "<i class='JS-base-num JS-num-1' alt='1'></i>"; break; case '2': numBox += "<i class='JS-base-num JS-num-2' alt='2'></i>"; break; case '3': numBox += "<i class='JS-base-num JS-num-3' alt='3'></i>"; break; case '4': numBox += "<i class='JS-base-num JS-num-4' alt='4'></i>"; break; case '5': numBox += "<i class='JS-base-num JS-num-5' alt='5'></i>"; break; case '6': numBox += "<i class='JS-base-num JS-num-6' alt='6'></i>"; break; case '7': numBox += "<i class='JS-base-num JS-num-7' alt='7'></i>"; break; case '8': numBox += "<i class='JS-base-num JS-num-8' alt='8'></i>"; break; case '9': numBox += "<i class='JS-base-num JS-num-9' alt='9'></i>"; break; case ',': numBox += "<i class='JS-base-num JS-num-point' alt=','></i>"; break; case '，': numBox += "<i class='JS-base-num JS-num-point' alt=','></i>"; break; default: numBox += "<i class='JS-base-num JS-num-point' alt=','></i>"; } }; //alert(numBox); $(numBox).prependTo(this); }; }; |
这里还需要添加样式表
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.JS-base-num{width:36px; height:60px; display:inline-block; background-image:url(../images/icon-num-skin.png); background-repeat:no-repeat;} .JS-num-0{background-position:0 0;} .JS-num-1{background-position:-42px 0;} .JS-num-2{background-position:-84px 0;} .JS-num-3{background-position:-126px 0;} .JS-num-4{background-position:-168px 0;} .JS-num-5{background-position:-210px 0;} .JS-num-6{background-position:-252px 0;} .JS-num-7{background-position:-294px 0;} .JS-num-8{background-position:-336px 0;} .JS-num-9{background-position:-378px 0;} .JS-num-point{background-position:-418px 0; width:20px;} .JS-num-per{background-position:-470px 0; width:20px;} .JS-num-yen{background-position:-442px 0; width:20px;} .JS-num-day{background-position:-498px 0; width:20px;} |
最后页面布局代码以及调用方法
|
1 2 3 4 |
<div class="num-skin JS-num-set"> <span class="JS-num-val">2,800,040</span> <i class="JS-base-num JS-num-yen"></i> </div> |
|
1 2 3 |
$(function(){ numSkin('.JS-num-set' , '.JS-num-val'); }); |
你明白了吗？
本文原创，转载请注明出处：cheris官方博客
顶顶顶！！！学习了~
刘俊怡 发表于: 2016/04/12 16:19