用JS实现3D球状标签云示例代码


Posted in Javascript onDecember 01, 2013

Matter:

1、发现实例不足,无法悬停(有待解决)
2、无法系统随机自动上色(有待解决)

首先使用标签云的一家高知名度的网站---照片共享网站Flickr。标签云的设计者是交互设计师Stewart Butterfield。之后,标签云被诸如del、Technorati等网站采纳。
首次公布的外观标签云(或至少是一个加权名单),可归结起来主要是"潜意识档案" ,在 Douglas Coupland的Microserfs( 1995 ) 。在Lester Leaps Out,威尔士诗人朗道,使用同样的逻辑加权文本,以创造一个图形文字地图来描述爵士音乐。诗中出现在他的书《Magic Fire Chevrolet》中( 1980 ) 。

html代码段

<!DOCTYPE html> 
<html> 
<headers> 
<meta charset=utf-8 /> 
<title>3D球状标签</title> 
<link rel="stylesheet" type="text/css" href="3Dtag_style.css" /> 
<script type="text/javascript" src="3Dtag.js"></script> 
</headers> 
<body> 
<div id="div1"> 
<a href="#">水果类别</a> 
<a href="#" class="red">苹果</a> 
<a href="#">香蕉</a> 
<a href="#">西瓜</a> 
<a href="#" class="blue">3Dtag</a> 
<a href="#">SEO</a> 
<a href="#">火龙果</a> 
<a href="#" class="yellow">梨</a> 
<a href="#">球状</a> 
<a href="#" class="red">CSS</a> 
<a href="#">PHP</a> 
<a href="#" class="blue">Java</a> 
<a href="#">继承</a> 
<a href="#">C#</a> 
<a href="#" class="blue">OOP</a> 
<a href="#">语言类别</a> 
<a href="#" class="blue">西红柿</a> 
<a href="#">C++</a> 
<a href="#">C</a> 
<a href="#">番茄</a> 
<a href="#">demo</a> 
</div> 
<p>3D球状tag</p> 
</body></html>

Javascript代码段
var radius = 120; //旋转半径; 
var dtr = Math.PI/180; 
var d=300; var mcList = []; 
var active = false; 
var lasta = 1; 
var lastb = 1; 
var distr = true; 
var tspeed=10; 
var size=250; 
var mouseX=0; 
var mouseY=0; 
var howElliptical=1; 
var aA=null; 
var oDiv=null; 
window.onload=function () 
{ 
var i=0; 
var oTag=null; 
oDiv=document.getElementById('div1'); 
aA=oDiv.getElementsByTagName('a'); 
for(i=0;i<aA.length;i++) 
{ 
oTag={}; 
oTag.offsetWidth=aA[i].offsetWidth; 
oTag.offsetHeight=aA[i].offsetHeight; 
mcList.push(oTag); 
} 
sineCosine( 0,0,0 ); 
positionAll(); 
oDiv.onmouseover=function () 
{ 
active=true; 
}; 
oDiv.onmouseout=function () 
{ 
active=false; 
}; 
oDiv.onmousemove=function (ev) 
{ 
var oEvent=window.event || ev; 
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2); 
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2); 
mouseX/=5; 
mouseY/=5; 
}; 
setInterval(update, 30); 
}; 
function update() 
{ 
var a; 
var b; 
if(active) 
{ 
a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed; 
b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed; 
} 
else 
{ 
a = lasta * 0.98; 
b = lastb * 0.98; 
} 
lasta=a; 
lastb=b; 
if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01) 
{ 
return; 
} 
var c=0; 
sineCosine(a,b,c); 
for(var j=0;j<mcList.length;j++) 
{ 
var rx1=mcList[j].cx; 
var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa); 
var rz1=mcList[j].cy*sa+mcList[j].cz*ca; 
var rx2=rx1*cb+rz1*sb; 
var ry2=ry1; 
var rz2=rx1*(-sb)+rz1*cb; 
var rx3=rx2*cc+ry2*(-sc); 
var ry3=rx2*sc+ry2*cc; 
var rz3=rz2; 
mcList[j].cx=rx3; 
mcList[j].cy=ry3; 
mcList[j].cz=rz3; 
per=d/(d+rz3); 
mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2); 
mcList[j].y=ry3*per; 
mcList[j].scale=per; 
mcList[j].alpha=per; 
mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6); 
} 
doPosition(); 
depthSort(); 
} 
function depthSort() 
{ 
var i=0; 
var aTmp=[]; 
for(i=0;i<aA.length;i++) 
{ 
aTmp.push(aA[i]); 
} 
aTmp.sort 
( 
function (vItem1, vItem2) 
{ 
if(vItem1.cz>vItem2.cz) 
{ 
return -1; 
} 
else if(vItem1.cz<vItem2.cz) 
{ 
return 1; 
} 
else 
{ 
return 0; 
} 
} 
); 
for(i=0;i<aTmp.length;i++) 
{ 
aTmp[i].style.zIndex=i; 
} 
} 
function positionAll() 
{ 
var phi=0; 
var theta=0; 
var max=mcList.length; 
var i=0; 
var aTmp=[]; 
var oFragment=document.createDocumentFragment(); 
//随机排序 
for(i=0;i<aA.length;i++) 
{ 
aTmp.push(aA[i]); 
} 
aTmp.sort 
( 
function () 
{ 
return Math.random()<0.5?1:-1; 
} 
); 
for(i=0;i<aTmp.length;i++) 
{ 
oFragment.appendChild(aTmp[i]); 
} 
oDiv.appendChild(oFragment); 
for( var i=1; i<max+1; i++){ 
if( distr ) 
{ 
phi = Math.acos(-1+(2*i-1)/max); 
theta = Math.sqrt(max*Math.PI)*phi; 
} 
else 
{ 
phi = Math.random()*(Math.PI); 
theta = Math.random()*(2*Math.PI); 
} 
//坐标变换 
mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi); 
mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi); 
mcList[i-1].cz = radius * Math.cos(phi); 
aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px'; 
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px'; 
} 
} 
function doPosition() 
{ 
var l=oDiv.offsetWidth/2; 
var t=oDiv.offsetHeight/2; 
for(var i=0;i<mcList.length;i++) 
{ 
aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px'; 
aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px'; 
aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px'; 
aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")"; 
aA[i].style.opacity=mcList[i].alpha; 
} 
} 
function sineCosine( a, b, c) 
{ 
sa = Math.sin(a * dtr); 
ca = Math.cos(a * dtr); 
sb = Math.sin(b * dtr); 
cb = Math.cos(b * dtr); 
sc = Math.sin(c * dtr); 
cc = Math.cos(c * dtr); 
}

CSS代码段
body {background: #000 url(index.png) no-repeat center 230px;} 
#div1 {position:relative; width:450px; height:450px; margin: 20px auto 0; } 
#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 3px 6px; } 
#div1 a:hover {border: 1px solid #eee; background: #000; } 
#div1 .blue {color:blue;} 
#div1 .red {color:red;} 
#div1 .yellow {color:yellow;} p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; } 
p a { font-size: 14px; color: #ba0c0c; } 
p a:hover { color: red; }
Javascript 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
javascript每日必学之循环
Feb 19 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
js arguments,jcallee caller用法总结
Nov 30 #Javascript
js中arguments的用法(实例讲解)
Nov 30 #Javascript
JavaScript中的undefined学习总结
Nov 30 #Javascript
浅析JavaScript中的typeof运算符
Nov 30 #Javascript
浅析JavaScript中的delete运算符
Nov 30 #Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 #Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 #Javascript
You might like
再说下636单管机
2021/03/02 无线电
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PDO::commit讲解
2019/01/27 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
js实现Tab选项卡切换效果
2020/07/17 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python实现截屏的函数
2015/07/26 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python中存取文件的4种不同操作
2018/07/02 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
法人代表授权委托书
2014/04/08 职场文书
说明书范文
2014/05/07 职场文书
小学体育教学随笔
2015/08/14 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
技术入股合作协议书
2016/03/21 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python