网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 网站常用 >> 正文
最新文章
· JavaScript实现文本段落折叠展开和收
· 拖动滑块选择范围的网页插件代码
· JS版元素周期表
· jQuery数字统计并生成进度条动画的代
· 一个不错的CSS分页样式
· 实用的Flash全屏和退出全屏切换效果
· 纯CSS实现三列DIV等高布局
· jquery四色网页换肤代码
· 可展开和收起的在线客服代码
· 功能强大的漂亮计算器
热门文章
 登录时用Cookie保存用户名和密码
 获取16进制颜色值的取色器
 一个小型的JS在线文本编辑器
 JavaScript实现文本段落折叠展开和
 利用js给li标签添加序号
 通过QQ查询QQ用户的头像、昵称、地
 可展开和收起的在线客服代码
 js取色器
 基于jQuery的对象切换插件soChange
 javascript让状态栏不显示链接地址
相关文章
没有相关文章
JavaScript实现的3D球面标签云效果
来源:蓝色理想 更新时间:2010/10/26 11:25:23 阅读次数: 我要投稿
☉预览 ↓下载 #复制 +收藏
特效代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>3D球面标签云 - 妙味课堂 - www.miaov.com</title> 
<link rel="stylesheet" type="text/css" href="http://www.miaov.com/miaov_demo/3dLable/miaov_style.css" /> 
<script type="text/javascript" src="http://www.miaov.com/miaov_demo/3dLable/miaov.js"></script> 
</head> 
 
<body> 
<div id="div1"> 
 <a href="http://www.miaov.com">JS课程</a> 
 <a href="http://www.miaov.com/course_outline_1.html.php" class="red">教程</a> 
 <a href="http://www.miaov.com">试听</a> 
 <a href="http://www.miaov.com">精品</a> 
 <a href="http://www.miaov.com" class="blue">妙味课堂</a> 
 <a href="http://blog.miaov.com/722.html">SEO</a> 
 <a href="http://www.miaov.com" class="red">特效</a> 
 <a href="http://www.miaov.com/course.html.php" class="yellow">JavaScript</a> 
 <a href="http://www.miaov.com/course_detail_1.html.php">miaov</a> 
 <a href="http://www.miaov.com/course_detail_2.html.php" class="red">CSS</a> 
 <a href="http://www.miaov.com/course_detail_3.html.php">求职</a> 
 <a href="http://www.miaov.com/course_detail_2.html.php" class="blue">面试题</a> 
 <a href="http://www.miaov.com/contact.html.php">继承</a> 
 <a href="http://www.miaov.com/" class="red">妙味课堂</a> 
 <a href="http://www.miaov.com/about.html.php" class="blue">OOP</a> 
 <a href="http://www.miaov.com/work.html.php">XHTML</a> 
 <a href="http://www.miaov.com/message.html.php" class="blue">setInterval</a> 
 <a href="http://blog.miaov.com/">W3C</a> 
 <a href="http://blog.miaov.com/716.html">石川</a> 
 <a href="http://www.miaov.com/" class="yellow">妙味课堂</a> 
 <a href="http://blog.miaov.com/676.html">blue</a> 
</div> 
<p>妙味课堂:<a href="http://www.miaov.com/">http://www.miaov.com</a></p> 
</body> 
</html>
☉预览 ↓下载 #复制 +收藏
特效说明:

使用说明:
一般需要修改的,应该是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

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号