一个很有趣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点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
Java中Timer的用法详解
Oct 21 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
javascript RegExp 使用说明
May 21 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
微信小程序自定义组件
Aug 16 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
js实现旋转木马轮播图效果
Jan 10 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
react基本安装与测试示例
2020/04/27 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
js实现批量删除功能
2020/08/27 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python使用getpass库读取密码的示例
2017/10/10 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python实现三次样条插值
2018/12/17 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
使用python实现学生信息管理系统
2021/02/25 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
2014年煤矿工作总结
2014/11/24 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
公司经营目标责任书
2015/01/29 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript