在业务中遇到一个问题:在页面上显示一个球,且球的大小会应数字的大小而改变。
我们都知道 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/