一个很有趣3D球状标签云兼容IE8


Posted in Javascript onAugust 22, 2014

看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试。觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果:
一个很有趣3D球状标签云兼容IE8
接下来是代码,html + css + js,不是基于jQuery的,所以不需要引入,代码复制下来就可以看到效果:

<div id="div1">
<a href="http://www.cnblogs.com/ntt1219/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘了滋味</a>
<a href="http://www.cnblogs.com/ntt1219/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘了滋味</a>
<a href="http://www.cnblogs.com/ntt1219/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘了滋味</a>
<a href="http://www.cnblogs.com/ntt1219/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘了滋味</a> 
</div>
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;}
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);
}
Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
JS实现拖动示例代码
Nov 01 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
angularJS中router的使用指南
Feb 09 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 #Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 #Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 #Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 #Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 #Javascript
js中实现多态采用和继承类似的方法
Aug 22 #Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 #Javascript
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
js+css在交互上的应用
2010/07/18 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
js面向对象编程总结
2017/02/16 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
让python json encode datetime类型
2010/12/28 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
linux面试题参考答案(3)
2012/09/13 面试题
人事部主管岗位职责
2013/12/26 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python