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通过数值改变球大小的更多相关文章
- jQuery拖拽改变元素大小
一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...
- jQuery鼠标拖曳改变div大小(模拟textarea右下角拖曳)
jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- WPF实现无边框窗体拖拽右下角▲ 改变窗体大小【framwork4.0】 谢谢大家关注
效果图:(右下角拖拽改变窗体大小) 第一步:添加xaml代码: <Border Name="ResizeBottomRight" MouseMove="Resize ...
- 【Unity】改变向量的方向而不改变其大小
最近在做一个打砖块游戏时遇到一个小问题,就是小球有可能会在左右两个边界之间做循环往返运动而导致游戏无法继续进行下去,于是我打算让小球在垂直撞向边界时改变一下方向,但是速度不变,尝试了一些方法但是没有达 ...
- SQLSERVER复制优化之一《改变包大小》
SQLSERVER复制优化之一<改变包大小> 自从搭了复制之后以为可以安枕无忧了,谁不知问题接踵而来 这次遇到的问题是丢包,不知道情况的读者可以先看一下我之前写的一篇<SQLSERV ...
- CSS3魔法堂:禁止用户改变textarea大小
一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...
随机推荐
- nohup和&后台运行,查看占用端口进程
1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...
- 动态代理:JDK动态代理和CGLIB代理的区别
代理模式:代理类和被代理类实现共同的接口(或继承),代理类中存有指向被代理类的索引,实际执行时通过调用代理类的方法.实际执行的是被代理类的方法. 而AOP,是通过动态代理实现的. 一.简单来说: JD ...
- 浅析Struts2中的OGNL和ValueStack
要了解Struts2与OGNL表达式的关系,我们必须先搞清楚以下三个概念: 1. ActionContext它是Action运行的上下文环境,Action的多项设置都存放在次,我们每一次Action ...
- Files and Directories
Files and Directories Introduction In the previous chapter we coveredthe basic functions that pe ...
- [C#]使用dnSpy对目标程序(EXE或DLL)进行反编译修改并编译运行
本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 本文使用的工具下载地址为: https://github.com/cnxy/dnSpy/arc ...
- SQL 之存储过程
存储过程 是用来执行管理任务或应用复杂的业务规则, 存储过程中可以包含逻辑控制语句和数据操纵语句,它可以接受参数.输出参数.返回单个或多个结果集以及返回值. 存储过程的优点 存储过程已在服务器注册 执 ...
- ssh、scp免秘钥远程执行命令:expect
首先安装expect # yum -y install expect 命令格式 # ./expect IP COMM #expect是独立的工具,所以不能用sh来执行 1 2 3 4 5 6 7 ...
- lua元表
__index元方法:按照之前的说法,如果A的元表是B,那么如果访问了一个A中不存在的成员,就会访问查找B中有没有这个成员.这个过程大体是这样,但却不完全是这样,实际上,即使将A的元表设置为B,而且B ...
- Vue 浅析与实践
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:曾柏羲 导语 入职接到的第一个需求是实现一个关于K歌实体售卖的ERP系统,管理系统过去做过不少,这次打算换个姿势,基于时下正热但早已不新 ...
- 12. ZooKeeper配额和认证
ZooKeeper具有与其数据模型相关的可配置配额(quota). 可以设置znode上的配额限制和存储的数据量.如果ZooKeeper命名空间中的一个子树超出与其关联的配额,ZooKeeper会在日 ...