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/