用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 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
第五节--克隆
2006/11/16 PHP
php 无限极分类
2008/03/27 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
js 操作css实现代码
2009/06/11 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
Node.js实现文件上传
2016/07/05 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python之文字转图片方法
2018/05/10 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
python实现剪贴板的操作
2021/07/01 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技