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通过数值改变球大小相关推荐

通过拖拽改变图片大小
<!doctype html> <html lang="en"><head><meta charset="utf-8" ...
改变文字颜色html,html怎么改变字体大小和颜色
font-family:'Microsoft YaHei'. 小编的个性取决于小编是谁,小编的态度要看看你是谁. 网页字体样式华文黑体:STHeiti 网页字体样式华文楷体:STKaiti 好的饰品是 ...
php的样式怎么设置字体大小,css中如何改变字体大小
在css中,可以使用font-size属性来改变字体大小,该属性可以设置字体大小,语法格式为"font-size:值;".实际上font-size属性设置的是字体中字符框的高度,实 ...
如何改变图片大小kb？图片尺寸怎么在线修改？
随着现在拍摄设备的像素越来越高,图片越来越清楚也就让图片的体积越来越大,在使用这些图片素材的时候就经常会遇到图片太大无法发送或者上传的情况,那么这时候应该怎么缩小图片的大小kb呢?今天来教给大家一个图 ...
在form中将数据打印到EXCEL文件(单元格合并、改变字体大小等操作)
[标题]在form中将数据打印到EXCEL文件的一些其他问题,请高手帮忙解决! [发贴人]lizhiqiang [分类]FORM分类.输出成EXCEL ------------------------ ...
java拖动组件,[小娱乐] 一个能拖动组件、改变组件大小的容器
[小娱乐] 一个能拖动组件.改变组件大小的容器 /* * JDragpullPane.java * * Created on 2007年3月20日, 上午12:31 */ package javax. ...
jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证 */ function submit_upload_picture() ...
mxGraph改变图形大小重置overlay位置
要在改变图形大小的时候改变overlay的位置.那肯定就要对重置图形大小的方法进行改造了.以下是源文件里的代码 mxGraph.prototype.resizeCells = function(cel ...
pycharm/pytorch OSError: 页面文件太小，无法完成操作（改变虚拟内存大小）
训练pytorch yolov5的时候报错解决办法,改变虚拟内存大小设置好要重启才生效好像不大对,要改成自定义大小:

jquery通过数值改变球大小

jquery通过数值改变球大小相关推荐

最新文章

热门文章