zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    OC学习一周总结
    C语言基础学习总结
    123
    汇编中中括号[]作用以及lea和mov指令的区别
    C#获取局域网内所有的SQL Server服务器名
    .net 初中级程序员招聘
    C#在客户端与 JS 交互
    [ZT]Mac下安装mysql和workbench
    Eclipse文件夹导入Jar
    Tomcat配置后提示404的解决办法
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/7008604.html
Copyright © 2011-2022 走看看