JavaScript实现的3D球面标签云效果
这个效果都是由 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球面标签云效果的更多相关文章
- 分享一个3D球面标签云
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- vue实现标签云效果
闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...
- 3D球状标签云(兼容IE8)
看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...
- js 标签云效果
下载:http://files.cnblogs.com/zjfree/js_tag_list.rar 效果如下: 源码如下: <html> <head> <meta ht ...
- jqcloud 标签云效果
官网地址: http://mistic100.github.io/jQCloud/index.htmlgithub 地址: https://github.com/lucaong/jQCloud使用 & ...
- 用CSS制作伪标签云
performance testing stress testing conformance testing acceptane testing smoke testing regression te ...
- [翻译] DKTagCloudView - 标签云View
DKTagCloudView 效果(支持点击view触发事件): Overview DKTagCloudView is a tag clouds view on iOS. It can generat ...
- SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!
SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事 基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...
随机推荐
- PMON和SMON的功能
PMON:进程监控进程进程负责在反常中断的连接之后的清理工作.例如,如果因某些原因专用服务“故障”或被kill掉,PMON就是负责处理(恢复或回滚工作)和释放你的资源.PMON将发出未提交工作的回滚, ...
- tcpdump查看某个端口数据
tcpdump -i eth0 -nn -A port tcpdump src
- strongswan
StrongSwan is an open source IPsec-based VPN Solution. It supports both the IKEv1 and IKEv2 key exch ...
- git_基本使用
1.默认你已经安装了,git的客户端,这里我们使用git bash操作. 2.执行git init命令: git ini 3.在本地创建ssh key: ssh-keygen -t rsa - ...
- LUA 表排序
t = { [] = , [] = , [] = } for k, v in pairs(t) do--注意这个输出顺序是没有规律的!!! print(k, v) end local keys = { ...
- Hive的安装和建表
目录 认识Hive 1. 解压 2. 配置mysql metastore(切换到root用户) 3. 配置hive 4. 安装hive和mysq完成后,将MySQL的连接jar包拷贝到$HIVE_HO ...
- python portia
docker run -i -t --rm -v <PROJECTS_FOLDER>:/app/data/projects:rw -p 9001:9001 scrapinghub/port ...
- PC上对限制在微信客户端访问的html页面进行调试
PC上对微信的html5页面做测试,一般来说需要两个条件:浏览器UA改为微信客户端的UA(打开页面提示请在微信客户端登录就需要修改UA):增加满足html5验证条件的Cookie来进行微信OAUTH验 ...
- pyqt5 sip 段错误问题
在我装labelImg工具时,装了pyqt5,而后发现缺少sip模块,又pip安装上后,启动labelImg,报段错误. 经查资料,很容易发现,是pyqt5与sip版本不匹配造成的,具体缘由,可参看: ...
- 【HDU5992】Finding Hotels 【KD树】
题意 给出n个酒店的坐标和价格,然后m个查询,每个查询给出一个人的坐标和能承受的最大价格,然后找出在他价格承受范围以内,距离他最近的宾馆,如果有多个,那么输出第一个 分析 kd树的模板题 #inclu ...