1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="jquery.min.js" type="text/javascript"></script> 6 <script language="javascript" type="text/javascript"> 7 $(document).ready(function () { 8 aa("", 1); 9 }); 10 11 function aa(a, s) { 12 var lb_va = ""; 13 if (s == 1) { 14 lb_va = document.getElementById("lb").innerText; 15 } 16 else { lb_va = a; } 17 lb_va = $.trim(lb_va); 18 var div1 = document.getElementById("diva"); 19 if (lb_va.length == 1) { 20 div1.style.width = "15px"; 21 div1.style.right = "-15px"; 22 div1.style.top = "-10px"; 23 } else if (lb_va.length == 2) { 24 div1.style.width = "20px"; 25 div1.style.right = "-15px"; 26 div1.style.top = "-10px"; 27 } 28 else if (lb_va.length == 3) { 29 div1.style.width = "30px"; 30 div1.style.right = "-15px"; 31 div1.style.top = "-10px"; 32 } 33 else if (lb_va.length == 4) { 34 div1.style.width = "40px"; 35 div1.style.right = "-15px"; 36 div1.style.top = "-10px"; 37 } 38 } 39 40 function Trim(str, is_global) { 41 var result; 42 result = str.replace(/(^\s+)|(\s+$)/g, ""); 43 if (is_global.toLowerCase() == "g") { 44 result = result.replace(/\s/g, ""); 45 } 46 return result; 47 } 48 49 function ti() { 50 var a = $("#tx").val(); 51 $("#lb").html(a); 52 aa(a, 0); 53 } 54 </script> 55 <style type="text/css"> 56 .divv 57 { 58 height: 20px; /* width: 20px; 59 right: -25px; 60 top: -10px;*/ 61 float: right; 62 position: relative; 63 background-color: #FF3B30; 64 text-align: center; 65 color: Black; 66 border-radius: 10px; 67 border: solid rgb(100,100,100) 1px; 68 } 69 .divvv 70 { 71 border: 1px solid #ccc; 72 width: 40px; 73 height: 40px; 74 margin-top: 100px; 75 background-image: url(‘Style/image/setting.png‘); 76 background-repeat: no-repeat; 77 } 78 a 79 { 80 text-decoration: none; 81 } 82 </style> 83 </head> 84 <body> 85 <input type="text" id="tx" /> 86 <input type="button" id="btn_tijiao" value="提交" onclick="ti()" /> 87 <div class=" divvv"> 88 <div id="diva" class="divv"> 89 <label id="lb"> 90 1111</label> 91 </div> 92 </div> 93 </body> 94 </html>
效果：
原文：http://www.cnblogs.com/houlin/p/6430523.html