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部件 ...
随机推荐
- 学习笔记之C++入门到精通(名师教学·手把手教会)【职坐标】_腾讯课堂
C++入门到精通(名师教学·手把手教会)[职坐标]_腾讯课堂 https://ke.qq.com/course/101465#term_id=100105503 https://github.com/ ...
- Oracle Database PSU/CPU
1. 什么是PSU/CPU?CPU: Critical Patch UpdateOracle对于其产品每个季度发行一次的安全补丁包,通常是为了修复产品中的安全隐患. PSU: Patch Set Up ...
- user_add示例
#!/usr/bin/python3# -*- coding: utf-8 -*-# @Time : 2018/5/28 16:51# @File : use_test_add.py 数据 ...
- 十、api自动化环境问题及解决方案汇总(持续更新)
1.jenkins报错: Unable to read /root/.jenkins/config.xml at hudson.WebAppMain$3.run(WebAppMain.java:248 ...
- 33.使用默认的execAndWait拦截器
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 当我们进行数据库查询等相关的操作时,如果服务器负荷过重可能不能及时把数据查询 ...
- Yii中使用RBAC完全指南
开始准备 Yii提供了强大的配置机制和很多现成的类库.在Yii中使用RBAC是很简单的,完全不需要再写RBAC代码.所以准备工作就是,打开编辑器,跟我来.设置参数.建立数据库 在配置数组中,增加以下内 ...
- 跟我学算法-吴恩达老师(超参数调试, batch归一化, softmax使用,tensorflow框架举例)
1. 在我们学习中,调试超参数是非常重要的. 超参数的调试可以是a学习率,(β1和β2,ε)在Adam梯度下降中使用, layers层数, hidden units 隐藏层的数目, learning_ ...
- Spring Boot 异步调用
添加一个类ThreadPoolConfig.java package com.cjcx.inter.framework.config; import org.springframework.conte ...
- 人脸检测及识别python实现系列(2)——识别出人脸
人脸检测及识别python实现系列(2)——识别出人脸 http://www.cnblogs.com/neo-T/p/6430583.html
- set 续3
-------siwuxie095 set 技巧高级篇: 1.利用 set /a 进行赋值 在开启变量延迟情况下,要判断数组 S!n! 的值的情况, 不 ...