在业务中遇到一个问题:在页面上显示一个球。且球的大小会应数字的大小而改变。

我们都知道 js是能够画圆(用css样式准备一个圆。假设addClass),但这并非我们想要的。

于是笔者脑洞打开:用样式画一个球

效果图:

看到这里。是不是认为笔者脑洞非常大,用亮光使圆变成球。我也是没办法。被逼无奈才想出如此下策。

是不是有那么一点像了。

css代码(省略了width , height , border-radius。在后面动态加入):

  1. .drawCircle {
  2. font-weight: bold;
  3. font-size: 20px;
  4. color: rgba(255, 255, 255, 1);
  5. text-align: center;
  6. border:none;
  7. 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%);
  8. }

js代码:

  1. <script>
  2. $(function() {
  3. var nums = [7.0, 8, 9.8];
  4. for (var i = 0; i < nums.length; i++) {
  5. drawCircle(nums[i]);
  6. }
  7.  
  8. // 画园
  9. function drawCircle(num) {
  10. var _width = 6 * num + "px";
  11. var _font_size = 2 * num ;
  12. $("<div/>").addClass("drawCircle").text(num).css({
  13. "width": _width,
  14. "height": _width,
  15. "border-radius": _width,
  16. "line-height": _width,
  17. "font-size": _font_size
  18. }).appendTo("body");
  19. }
  20. })
  21. </script>

曾遇到一个问题,由于num有小数点,而class也是有点,easy是js选择器误判,能够加入前缀或者是用以上方法避免使用class。

业务中效果图(打上马赛克):

转载请注明博客来源:http://blog.csdn.net/qq_19558705

很多其它干货等你来拿 http://www.itit123.cn/

jquery通过数值改变球大小的更多相关文章

  1. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  2. jQuery鼠标拖曳改变div大小(模拟textarea右下角拖曳)

    jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...

  3. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  4. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  5. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  6. WPF实现无边框窗体拖拽右下角▲ 改变窗体大小【framwork4.0】 谢谢大家关注

    效果图:(右下角拖拽改变窗体大小) 第一步:添加xaml代码: <Border Name="ResizeBottomRight" MouseMove="Resize ...

  7. 【Unity】改变向量的方向而不改变其大小

    最近在做一个打砖块游戏时遇到一个小问题,就是小球有可能会在左右两个边界之间做循环往返运动而导致游戏无法继续进行下去,于是我打算让小球在垂直撞向边界时改变一下方向,但是速度不变,尝试了一些方法但是没有达 ...

  8. SQLSERVER复制优化之一《改变包大小》

    SQLSERVER复制优化之一<改变包大小> 自从搭了复制之后以为可以安枕无忧了,谁不知问题接踵而来 这次遇到的问题是丢包,不知道情况的读者可以先看一下我之前写的一篇<SQLSERV ...

  9. CSS3魔法堂:禁止用户改变textarea大小

    一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...

随机推荐

  1. Java并发Fork-Join框架原理解析

    1.什么是Foirk/Join框架 Fork/Join框架是Java7提供用于并行执行任务的框架,是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 2.什么是并行流与顺 ...

  2. 对于Mongodb数据库的学习

    数据库主要分为两种 1.关系型数据库(RDBS) 2.非关系性数据库(NoSQL) 而MongoDB就是非关系型数据库里的一种 文档型数据库(BSON) 文档型数据库(BSON)顾名思义就是以文档的形 ...

  3. Spring Security 4 新增特性

    1.概述 a) 特性 以下是Spring Security 4.0的新特性 Web Socket 支持 测试支持 整合Spring Data CSRF令牌参数解析 更安全的默认设置 role权限不再必 ...

  4. 说说css中pt、px、em、rem都扮演了什么角色

    前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

  5. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  6. 预加载(图片,css ,js)

    图片预加载 new Image().src = 'http://img1.t.sinajs.cn/t35/skin/skin_008/skin.css'; //新浪(4) 非ie下预加载(js,css ...

  7. 重温CSS3

    基础不牢,地动山摇!没办法,只能重温"经典"! 1.CSS3边框:border-radius; box-shadow; border-image border-radius:r1, ...

  8. 优雅的使用Chrome调试Node程序

    前言 我不知道大家用什么来调试node程序.可能有的人用node-inspect,但是这货很久没更新了,而且一堆的bug用起来很不爽:可能有的人用命令行来,但是这样操作不够灵活:还有人只用consol ...

  9. spring学习笔记(一) Spring概述

    博主Spring学习笔记整理大部分内容来自Spring实战(第四版)这本书.  强烈建议新手购入或者需要电子书的留言. 在学习Spring之前,我们要了解这么几个问题:什么是Spring?Spring ...

  10. SHA安全散列算法简析

    1 SHA算法简介 1.1 概述 SHA (Secure Hash Algorithm,译作安全散列算法) 是美国国家安全局 (NSA) 设计,美国国家标准与技术研究院(NIST) 发布的一系列密码散 ...