用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的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
Angular2入门--架构总览
Mar 29 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
详解Chai.js断言库API中文文档
Jan 31 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php计算整个目录大小的方法
2015/06/01 PHP
yii用户注册表单验证实例
2015/12/26 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PDO::inTransaction讲解
2019/01/28 PHP
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python中规范定义命名空间的一些建议
2016/06/04 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
个人评语大全
2014/05/04 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
小学生成绩单评语
2014/12/31 职场文书
长城英文导游词
2015/01/30 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
MySql分区类型及创建分区的方法
2022/04/13 MySQL