一个很有趣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 相关文章推荐
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JSON 数据格式详解
Sep 13 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
JS实现可控制的进度条
Mar 25 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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
动态创建类实例代码
2009/10/07 Python
Python的另外几种语言实现
2015/01/29 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
python Pygame的具体使用讲解
2017/11/03 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
详解Python中的动态属性和特性
2018/04/07 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python爬虫用mongodb的理由
2020/07/28 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
花田少年史观后感
2015/06/16 职场文书
公司员工奖惩制度
2015/08/04 职场文书
公司员工培训管理制度
2015/08/04 职场文书
遗嘱范文
2015/08/07 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python