首页 > Web开发 > 详细

css和jQuery ,字符串中重新单个字符样式背景

时间:2015-12-25 11:45:03      阅读:356      评论:0      收藏:0      [点我收藏+]
 <table class="tb2">
 <tr><td class="td1">融资登记企业<span>985</span></td><td class="td2">融资项目数量<span>985</span></td><td class="td3">融资需求金额<span>985</span>万元</td></tr>
  <tr><td>完成融资企业<span>00008</span></td><td>完成融资数量<span>985</span></td><td>完成融资金额<span>985</span>万元</td></tr>
 </table>
背景图
技术分享


.tb2 td span i
{background:url(../images/numbg.png) no-repeat 0px 0;

display:inline-block;
font-size:20px;color:#ff0000;font-weight:bold;font-family:Arial;line-height:30px;display:inline-block;height:28px;width:27px;text-align:center;font-style:normal}
  $(".tb2 td span").each(function () {//遍历每个span元素
         var str = $(this).text();
         var arr = str.match(/./g); //将元素中的单个字符组成数组
         var str2 = "";
         for (var i = 0; i < arr.length; i++) {
             str2 += arr[i].replace(arr[i], "<i>" + arr[i] + "<\/i>"); //将数组元素替换,并且带有i标签
         }
         $(this).html(str2); //对当前元素进行新的赋值,例如将数字985替换为<i>9</i><i>8</i><i>5</i>的格式
     });

 

最终效果

技术分享

如果用背景平铺和letter-spacing,是达不到这种效果的,数字的前面和后面部分都会有一小段出现

css和jQuery ,字符串中重新单个字符样式背景

原文:http://www.cnblogs.com/qigege/p/5075297.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!