<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js实现3D球面标签云 阿里西西整理公布</title>

<link rel="stylesheet" type="text/css" href="miaov_style.css" />

<script type="text/javascript" src="miaov.js"></script>

</head>

<body>

<div id="div1">

	<a href="http://www.alixixi.com">JS课程</a>

	<a href="http://www.alixixi.com" class="red">教程</a>

	<a href="http://www.alixixi.com">试听</a>

	<a href="http://www.alixixi.com">精品</a>

	<a href="http://www.alixixi.com" class="blue">妙味课堂</a>

	<a href="http://alixixi.com">SEO</a>

	<a href="http://alixixi.com" class="red">特效</a>

	<a href="http://alixixi.com" class="yellow">JavaScript</a>

	<a href="http://alixixi.com">miaov</a>

	<a href="http://alixixi.com" class="red">CSS</a>

	<a href="http://alixixi.com">求职</a>

	<a href="http://www.alixixi.com" class="blue">面试题</a>

	<a href="http://www.alixixi.com">继承</a>

	<a href="http://www.alixixi.com/" class="red">妙味课堂</a>

	<a href="http://www.alixixi.com" class="blue">OOP</a>

	<a href="http://www.alixixi.com">XHTML</a>

	<a href="http://www.alixixi.com" class="blue">setInterval</a>

	<a href="http://alixixi.com">W3C</a>

	<a href="http://alixixi.com">JAVA</a>

	<a href="http://alixixi.com" class="yellow">妙味课堂</a>

	<a href="http://alixixi.com">blue</a>

</div>

</body>

</html>

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;}

p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }

p a { font-size: 14px; color: #ba0c0c; }

p a:hover { color: red; }
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);

}

分享一个3D球面标签云的更多相关文章

  1. JavaScript实现的3D球面标签云效果

    这个效果都是由 FLASH 实现的,能不能由 JavaScript 实现呢? 我们也十分喜欢这个效果,就花了一些时间写出来了,如图所示: 效果预览点这里:http://www.miaov.com/mi ...

  2. 3D球状标签云（兼容IE8）

    看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...

  3. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  4. 解析3D标签云，其实很简单

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时 ...

  5. 纯JS实现的3D标签云，不依赖不论什么第三方库，支持移动页面

    <span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC &q ...

  6. SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  7. JQCloud: 一个前端生成美化标签云的简单JQuery插件

    本文原文地址:https://jiang-hao.com/articles/2018/blog-JQCloud.html 因为博客需要,发现了一个生成美化简约风格的标签云的JQuery插件. 官网地址 ...

  8. .Net Excel 导出图表Demo(柱状图，多标签页) .net工具类 分享一个简单的随机分红包的实现方式

    .Net Excel 导出图表Demo(柱状图,多标签页) 1 使用插件名称Epplus,多个Sheet页数据应用,Demo为柱状图(Epplus支持多种图表) 2 Epplus 的安装和引用 新建一 ...

  9. 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

    这张图每位程序员应该都深有感触. 人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞. 现实中程序员是这样的:编码5分钟,调试两小时. 今天我要给大家分享一个用WebGL开发的网站,感 ...

随机推荐

  1. windows下绑定线程（进程）到指定的CPU核心

    一个程序指定到单独一个CPU上运行会比不指定CPU运行时快.这中间主要有两个原因:1)CPU切换时损耗的性能.2)Intel的自动降频技术和windows的机制冲突:windows有一个功能是平衡负载 ...

  2. html的特质语义:微格式及其他(重点介绍其中两种)

    今天再次翻开html的书本, 感觉过了个周末似乎生疏了许多, 虽然我是刚接触html的, 但是对于他还是抱有极其大的兴趣的, 所以不爱看书的我, 也开始一遍遍的翻阅着书本, 寻找解决问题的方法, 下面 ...

  3. LDAP禁止匿名访问

    LDAP默认是允许用户匿名访问的,如下图:在使用工具连接时,勾选匿名绑定后,不需要输入UserDN和密码就可能连接到LDAP服务器,但是只能进行read及search操作.不能做任何的修改及删除操作. ...

  4. 【转】Cocoa中的位与位运算

    转自:http://www.tuicool.com/articles/niEVjy 介绍 位操作是程序设计中对位模式或二进制数的一元和二元操作. 在许多古老的微处理器上, 位运算比加减运算略快, 通常 ...

  5. mysqldump备份原理

    现网中数据库运维时,要经常对数据库做热备.为保证恢复时数据的完整性与一致性, 一种方法是在备份之前锁表,但锁表会影响正在运行的业务. mysqldump是当前MySQL中最常用的备份工具,通过mysq ...

  6. compass安装

    修改ruby软件包的sources 国外服务器不给力,经常链接失败,换成国内淘宝的:https://ruby.taobao.org/ 先移除本有的sources gem sources --remov ...

  7. SQL SERVER数据库服务操作

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. 在Fedora20上安装Oracle 12c

    本文将引导大家在Fedora20的环境下成功安装Oracle12c. 安装前的准备 编辑/etc/hosts文件,添加本机名称 编辑/etc/selinux/config文件 编辑/etc/redha ...

  9. C#代码设置窗体和Panel的位置大小

    1.设置Panel位置大小 private void button2_Click(object sender, EventArgs e) { panel1.Visible = false; panel ...

  10. c++ 编译期计算 （一）

    编译期就是编译器进行编译,产生.obj文件的所处的那一段时间(如果是广义的编译期,那么一般还包括了链接期,因为现在很多编译器都会自动调用链接器进行链接)执行期就是你执行某个已经链接好的程序的那段时间. ...