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也是有点，easy是js选择器误判，能够加入前缀或者是用以上方法避免使用class。

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

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

很多其它干货等你来拿 http://www.itit123.cn/

总结

以上是生活随笔为你收集整理的jquery通过数值改变球大小的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。