在業務中遇到一個問題：在頁面上顯示一個球。且球的大小會應數字的大小而改變。

我們都知道 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通过数值改变球大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。