用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 相关文章推荐
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
js实现页面图片消除效果
Mar 24 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
PHP的FTP学习(一)
2006/10/09 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
php实现简易计算器
2020/08/28 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
微信小程序自定义组件
2017/08/16 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
运动会广播稿50字
2014/01/26 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
高三励志标语
2014/06/05 职场文书
建筑工地文明标语
2014/10/09 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技