一个很有趣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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 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遍历数组的方法分享
2012/03/22 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
python strip()函数 介绍
2013/05/24 Python
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python中的字典操作及字典函数
2018/01/03 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
国庆节演讲稿范文2014
2014/09/19 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
四大名著读书笔记
2015/06/25 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL