用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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
javascript去除空格方法小结
May 21 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 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缓存类代码(附详细说明)
2011/06/09 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
学习张林森心得体会
2014/09/10 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
雷峰塔导游词
2015/02/09 职场文书
成事在人观后感
2015/06/16 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Python基础之元类详解
2021/04/29 Python