jquery通过数值改变球大小

时间：2022-06-19 16:43:57

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

我们都知道 js是能够画圆（用css样式准备一个圆。假设addClass），但这并非我们想要的。

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

效果图：

jquery通过数值改变球大小

看到这里。是不是认为笔者脑洞非常大，用亮光使圆变成球。我也是没办法。被逼无奈才想出如此下策。

是不是有那么一点像了。

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。

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

jquery通过数值改变球大小

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

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

相关文章