一个很有趣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 相关文章推荐
js 判断脚本加载完毕的代码
Jul 13 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
PHP7 新特性详细介绍
2016/09/06 PHP
JS远程获取网页源代码实例
2013/09/05 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
Python 深入理解yield
2008/09/06 Python
tornado框架blog模块分析与使用
2013/11/21 Python
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
进一步理解Python中的函数编程
2015/04/13 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python处理xml文件的方法小结
2017/05/02 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
酷瑞网络科技面试题
2012/03/30 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
实习单位证明范例
2014/11/17 职场文书
党员身份证明材料
2015/06/19 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js