jquery通过数值改变球大小

在业务中遇到一个问题：在页面上显示一个球，且球的大小会应数字的大小而改变。

我们都知道 js是可以画圆（用css样式准备一个圆，如果addClass），但这并不是我们想要的。

于是笔者脑洞打开：用样式画一个球

效果图：

看到这里，是不是觉得笔者脑洞很大，用亮光使圆变成球。我也是没办法，被逼无奈才想出如此下策。是不是有那么一点像了。

css代码（省略了width , height , border-radius，在后面动态添加）：

.drawCircle {
				font-weight: bold;
				font-size: 20px;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				border:none;
				background: radial-gradient(circle farthest-side at 50% 12%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 1%, rgba(255, 0, 0, 1) 100%);
			}

js代码：

<script>
			$(function() {
				var nums = [7.0, 8, 9.8];
				for (var i = 0; i < nums.length; i++) {
					drawCircle(nums[i]);
				}
				
				// 画园
				function drawCircle(num) {
					var _width = 6 * num + "px";
					var _font_size = 2 * num ;
					$("<div/>").addClass("drawCircle").text(num).css({
						"width": _width,
						"height": _width,
						"border-radius": _width,
						"line-height": _width,
						"font-size": _font_size
					}).appendTo("body");
				}
			})
		</script>

曾遇到一个问题，因为num有小数点，而class也是有点，容易是js选择器误判，可以添加前缀或者是用以上方法避免使用class。

业务中效果图（打上马赛克）：

转载请注明博客来源：http://blog.csdn.net/qq_19558705

更多干货等你来拿 http://www.itit123.cn/