这个效果都是由 FLASH 实现的,能不能由 JavaScript 实现呢?

我们也十分喜欢这个效果,就花了一些时间写出来了,如图所示:

效果预览点这里:http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html
下载效果点这里:http://www.miaov.com/miaov_demo/3dLable/3dLable.rar

使用说明:

一般需要修改的,应该是3D球面的大小,也就是半径,修改了大小,就可以随意放进自己页面的任何地方。

半径大小修改:

下载后,打开 miaov.js 文件,第一行:var radius = 120; 这就是半径大小值了。

文字的修改在 miaov_demo.html 文件中,可以任意添加关键词的个数;

如果希望修改文字颜色、鼠标经过的样式,可以打开 miaov_style.css 文件,修改相关的样式即可。

效果原理:

制作这个效果需要重新回顾一下高中的数学知识:

球坐标系
例如:
r∈[0,+∞),
φ∈[0, 2π],
θ∈[0, π] .
r = 常数,即以原点为心的球面;
θ= 常数,即以原点为顶点、z轴为轴的圆锥面;
φ= 常数,即过z轴的半平面。
……
在这里,我们就不展开讲了,由数学老师来说明更合适些^_^
有兴趣的朋友可以看看百度百科的球坐标系原理:http://baike.baidu.com/view/1196991.htm

JavaScript实现的3D球面标签云效果的更多相关文章

  1. 分享一个3D球面标签云

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

  3. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

  4. 3D球状标签云(兼容IE8)

    看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...

  5. js 标签云效果

    下载:http://files.cnblogs.com/zjfree/js_tag_list.rar 效果如下: 源码如下: <html> <head> <meta ht ...

  6. jqcloud 标签云效果

    官网地址: http://mistic100.github.io/jQCloud/index.htmlgithub 地址: https://github.com/lucaong/jQCloud使用 & ...

  7. 用CSS制作伪标签云

    performance testing stress testing conformance testing acceptane testing smoke testing regression te ...

  8. [翻译] DKTagCloudView - 标签云View

    DKTagCloudView 效果(支持点击view触发事件): Overview DKTagCloudView is a tag clouds view on iOS. It can generat ...

  9. SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

随机推荐

  1. KMP算法解释

    给定两个字符串A,B,判断T是否为S的子串(变式:寻找子串B在串A中的位置). 要求一个O(|A|+|B|)的做法. 通常称A为目标串(或主串),B为模式串. 算法过程: 我们假设串A的长度为n,串B ...

  2. mysql-7事务管理

    1.事务的使用场景 mysql事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人愿,你既需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数 ...

  3. ROS+OPENVPN配置

    环境需求:ROS版本:5.26,OPENVPN版本:OpenVPNPortable1.0.3(下载地址http://sourceforge.net/projects/ovpnp/)在WIN7 X64, ...

  4. Introduction to Spring Data MongoDB

    Introduction to Spring Data MongoDB I just announced the new Spring 5 modules in REST With Spring: & ...

  5. Cardboard Talk02 Accelerometer

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Android studio 3.0.0 | Cardboard 1.0 在深入讨论具体实现之前,有必要了解一下Andro ...

  6. avalon新一代UI库发布

    任何前端框架,尤其是国内的,想推广开,必须有一个UI库,光是一个核心库当光头司令是不行的.此外还有一个小圈子,供大家遇到问题时可以发问,一起完善.自从avalon嫁入"去哪儿网"后 ...

  7. python's nonlocal

    [python's nonlocal] nonlocal是python3.x中新加的关键字,用于引用本作用域外层作用域的名字 参考:http://blog.csdn.net/chain2012/art ...

  8. Could not load TestContextBootstrapper [null]

    在对SpringBoot进行单元测试时,报错“Could not load TestContextBootstrapper [null]” 错误原因: Maven的pom.xml中某些SpringBo ...

  9. unity5-GI是什么?

    GI是什么? GI =直接光照+间接光照+环境光+反射光.直接光照先不用说了,间接光照是光线在物体上反射所带来的光照. 核心参数: 每个光源上的Bounce Intensity.环境光可以直接理解为你 ...

  10. Luogu 4449 于神之怒加强版

    挺套路的题,然而一开始还是想错了…… $\sum_{i = 1}^{n}\sum_{j = 1}^{m}gcd(i, j) ^ {k} = \sum_{T = 1}^{min(n, m)}\left ...