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

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>

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

<head>

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

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<title>标签云</title>

<script type="text/javascript">

	/**

	代码来源于：http://www.oleou.com/a/jishu/2014/0613/290.html

<span style="white-space:pre">	</span>经过了本人规范化，欢迎大家使用

<span style="white-space:pre">	</span>bitjjj@foxmail.com

	**/

	function TagCould(container,options){

		this.radius = 150;

		this.dtr = Math.PI/180;

		this.d = 500;

		this.mcList = [];

		this.active = false;

		this.lasta = 1;

		this.lastb = 1;

		this.distr = true;

		this.tspeed = 5;

		this.size = 250;

		this.mouseX = 0;

		this.mouseY = 0;

		this.howElliptical = 1;

		this.aA = null;

		this.oDiv = null;

		this.container = container;

		options = options || {};

		for(var p in options){

			this[p] = options[p];

		}

	}

	TagCould.prototype.start = function(){

		var i = 0, oTag = null, self = this;

		this.oDiv = typeof this.container == "string" ? document.getElementById(this.container) : this.container;

		this.aA = this.oDiv.getElementsByTagName('a');

		for(i = 0; i < this.aA.length; i++){

			oTag={};

			oTag.offsetWidth = this.aA[i].offsetWidth;

			oTag.offsetHeight = this.aA[i].offsetHeight;

			this.mcList.push(oTag);

		}

		this.sineCosine( 0,0,0 );

		this.positionAll();

		document.addEventListener('mouseover',function(){

			self.active = true;

		}, false);

		document.addEventListener('mouseout',function(){

			self.active = false;

		}, false);

		document.addEventListener('mousemove',function(evt){

			//var oEvent=window.event || evt;

			self.onmove(window.event || evt);

		}, false);

		document.addEventListener('touchstart',function(){

			self.active = true;

		}, false);

		document.addEventListener('touchmove',function(evt){

			self.onmove(window.event || evt);

		}, false);

		document.addEventListener('touchend',function(){

			self.active = false;

		}, false);

		setInterval(function(){

			self.update();

		}, 30);

	}

	TagCould.prototype.onmove = function(oEvent){

		//var oEvent=window.event || evt;

		oEvent.preventDefault();  

		if(oEvent.touches && oEvent.touches.length > 0){

			oEvent.clientX = oEvent.touches[0].clientX;

			oEvent.clientY = oEvent.touches[0].clientY;

		}

		this.mouseX = oEvent.clientX - (this.oDiv.offsetLeft + this.oDiv.offsetWidth / 2);

		this.mouseY = oEvent.clientY - (this.oDiv.offsetTop + this.oDiv.offsetHeight / 2);

		this.mouseX /= 5;

		this.mouseY /= 5;

	}

	TagCould.prototype.update = function(){

		var a,b;

		if(this.active){

			a = (-Math.min( Math.max( -this.mouseY, -this.size ), this.size ) / this.radius ) * this.tspeed;

			b = (Math.min( Math.max( -this.mouseX, -this.size ), this.size ) / this.radius ) * this.tspeed;

		}

		else{

			a = this.lasta * 0.98;

			b = this.lastb * 0.98;

		}

		this.lasta = a;

		this.lastb = b;

		if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01){

			return;

		}

		var c=0;

		this.sineCosine(a,b,c);

		for(var j = 0; j < this.mcList.length; j++){

			var rx1 = this.mcList[j].cx,

				ry1 = this.mcList[j].cy * this.ca + this.mcList[j].cz * (-this.sa),

				rz1 = this.mcList[j].cy * this.sa + this.mcList[j].cz * this.ca,

				rx2 = rx1 * this.cb + rz1 * this.sb,

				ry2 = ry1,

				rz2 = rx1 * (-this.sb) + rz1 * this.cb,

				rx3 = rx2 * this.cc + ry2 * (-this.sc),

				ry3 = rx2 * this.sc + ry2 * this.cc,

				rz3 = rz2;

			this.mcList[j].cx = rx3;

			this.mcList[j].cy = ry3;

			this.mcList[j].cz = rz3;

			var per = this.d / (this.d + rz3);

			this.mcList[j].x = ( this.howElliptical * rx3 * per ) - ( this.howElliptical * 2 );

			this.mcList[j].y = ry3 * per;

			this.mcList[j].scale = per;

			this.mcList[j].alpha = per;

			this.mcList[j].alpha = (this.mcList[j].alpha - 0.6) * ( 10 / 6 );

		}

		this.doPosition();

		this.depthSort();

	}

	TagCould.prototype.depthSort = function(){

		var i=0,aTmp=[];

		for(i=0;i<this.aA.length;i++){

			aTmp.push(this.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;

		}

	}

	TagCould.prototype.positionAll = function (){

		var phi = 0,theta = 0,max = this.mcList.length,i = 0,aTmp = [],

			oFragment = document.createDocumentFragment();

		//随机排序

		for(i=0;i<this.aA.length;i++){

			aTmp.push(this.aA[i]);

		}

		aTmp.sort(

			function (){

				return Math.random()<0.5?1:-1;

			}

		);

		for(i=0;i<aTmp.length;i++){

			oFragment.appendChild(aTmp[i]);

		}

		this.oDiv.appendChild(oFragment);

		for( var i=1; i< max+1; i++){

			if( this.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);

			}

			//坐标变换

			this.mcList[i-1].cx = this.radius * Math.cos(theta) * Math.sin(phi);

			this.mcList[i-1].cy = this.radius * Math.sin(theta) * Math.sin(phi);

			this.mcList[i-1].cz = this.radius * Math.cos(phi);

			this.aA[i-1].style.left = this.mcList[i-1].cx + this.oDiv.offsetWidth/2 - this.mcList[i-1].offsetWidth/2+'px';

			this.aA[i-1].style.top = this.mcList[i-1].cy + this.oDiv.offsetHeight/2 - this.mcList[i-1].offsetHeight/2+'px';

		}

	}

	TagCould.prototype.doPosition = function(){

		var l = this.oDiv.offsetWidth / 2,t = this.oDiv.offsetHeight / 2;

		for(var i=0; i < this.mcList.length; i++){

			this.aA[i].style.left = this.mcList[i].cx + l - this.mcList[i].offsetWidth / 2+'px';

			this.aA[i].style.top = this.mcList[i].cy + t - this.mcList[i].offsetHeight / 2+'px';

			this.aA[i].style.fontSize = Math.ceil(12 * this.mcList[i].scale / 2) + 8 + 'px';

			this.aA[i].style.filter = "alpha(opacity=" + 100 * this.mcList[i].alpha + ")";

			this.aA[i].style.opacity = this.mcList[i].alpha;

		}

	}

	TagCould.prototype.sineCosine = function( a, b, c){

		this.sa = Math.sin(a * this.dtr);

		this.ca = Math.cos(a * this.dtr);

		this.sb = Math.sin(b * this.dtr);

		this.cb = Math.cos(b * this.dtr);

		this.sc = Math.sin(c * this.dtr);

		this.cc = Math.cos(c * this.dtr);

	}

	window.onload = function(){

		var tagCloud = new TagCould("div1",{});

		tagCloud.start();

	}

</script>

<style type="text/css">

body {

	/*background: #000 url(index.png) no-repeat center 230px;*/

}

#div1 {

	position:relative; width:0%; height:500px; margin:0 auto ;

}

#div1 a {

	position:absolute; top:0px; left:0px; font-family: Microsoft YaHei;

	color:#000;

	font-weight:bold;

	text-decoration:none;

	padding: 3px 6px;

}

#div1 a:hover {border: 1px solid #eee; background: #ccc; }

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

</style>

</head>

<body>

<div id="div1">

            <a href="http://www.oleou.com/tags/中国/" class="tagc1">中国</a>

            <a href="http://www.oleou.com/tags/金融/" class="tagc2">金融</a>

            <a href="http://www.oleou.com/tags/营销/" class="tagc1">营销</a>

            <a href="http://www.oleou.com/tags/服务/" class="tagc2">服务</a>

            <a href="http://www.oleou.com/tags/家电/" class="tagc1">家电</a>

            <a href="http://www.oleou.com/tags/兰州/" class="tagc1">兰州</a>

            <a href="http://www.oleou.com/tags/管道/" class="tagc1">管道</a>

            <a href="http://www.oleou.com/tags/维修/" class="tagc2">维修</a>

            <a href="http://www.oleou.com/tags/电脑/" class="tagc2">电脑</a>

            <a href="http://www.oleou.com/tags/路由器/" class="tagc2">路由器</a>

            <a href="http://www.oleou.com/tags/无线/" class="tagc2">无线</a>

            <a href="http://www.oleou.com/tags/tp link/" class="tagc1">tp link</a>

            <a href="http://www.oleou.com/tags/桥接/" class="tagc2">桥接</a>

            <a href="http://www.oleou.com/tags/设置/" class="tagc2">设置</a>

            <a href="http://www.oleou.com/tags/2003/" class="tagc2">2003</a>

            <a href="http://www.oleou.com/tags/port/" class="tagc1">port</a>

            <a href="http://www.oleou.com/tags/windows/" class="tagc2">windows</a>

            <a href="http://www.oleou.com/tags/远程/" class="tagc2">远程</a>

            <a href="http://www.oleou.com/tags/用友/" class="tagc2">用友</a>

            <a href="http://www.oleou.com/tags/软件/" class="tagc2">软件</a>

            <a href="http://www.oleou.com/tags/对方科目/" class="tagc2">对方科目</a>

            <a href="http://www.oleou.com/tags/调整单/" class="tagc2">调整单</a>

            <a href="http://www.oleou.com/tags/出库类别/" class="tagc1">出库类别</a>

            <a href="http://www.oleou.com/tags/操作/" class="tagc1">操作</a>

            <a href="http://www.oleou.com/tags/恢复/" class="tagc2">恢复</a>

            <a href="http://www.oleou.com/tags/sql/" class="tagc2">sql</a>

            <a href="http://www.oleou.com/tags/导入/" class="tagc2">导入</a>

            <a href="http://www.oleou.com/tags/分享/" class="tagc6">分享</a>

            <a href="http://www.oleou.com/tags/效果/" class="tagc2">效果</a>

            <a href="http://www.oleou.com/tags/兼容/" class="tagc1">兼容</a>

            <a href="http://www.oleou.com/tags/域名/" class="tagc2">域名</a>

</div>

</body>

</html>

Github代码地址：https://github.com/bitjjj/JS-3D-TagCloud

纯JS实现的3D标签云，不依赖不论什么第三方库，支持移动页面的更多相关文章

css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！
SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...
解析3D标签云，其实很简单
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时 ...
js实现动态球形标签云
HTML 原文演示地址:http://www.17sucai.com/pins/demoshow/8108 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
Python3.7+jieba(结巴分词)配合Wordcloud2.js来构造网站标签云(关键词集合)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_138 其实很早以前就想搞一套完备的标签云架构了,迫于没有时间(其实就是懒),一直就没有弄出来完整的代码,说到底标签对于网站来说还是 ...
3d标签云（JS版）
http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html http://www.lijian.net/p/windstagball/index.h ...
jquery 3D 标签云
http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html 相关选项 zoom: 90 初始的缩放度 ...
3D标签云
一.圆的坐标表达式 for(var i = 0;i < len;i++){ degree = (2*(k+1)-1)/len - 1;a = Math.acos(degree);//这样取得弧度 ...
div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

随机推荐

多模块Maven项目怎样使用javadoc插件生成文档
需求近期要对一个项目结构例如以下的Maven项目生成JavaDoc文档. Project |-- pom.xml ...
TROUBLE SHOOTING: FRM-30425
关键字:Oracle Form buider FRM-30425 汇总错误信息如下: FRM-30425: Summarized database item must reside in a blo ...
用eclipse编写Android程序时怎样生成apk文件
转载请注明出处:http://blog.csdn.net/ns_code/article/details/16828449 APK是Android Package的缩写,即Android安装包.通过将 ...
Python常用模块中常用内置函数的具体介绍
Python作为计算机语言中常用的语言,它具有十分强大的功能,但是你知道Python常用模块I的内置模块中常用内置函数都包括哪些具体的函数吗?以下的文章就是对Python常用模块I的内置模块的常用内置 ...
Windows8下通过IPv4地址访问Tomcat
最近在做Android开发,手机客户端需要通过IPv4地址访问电脑启动的Web应用服务. 在Windows 7不需要做什么设置,localhost,127.0.0.1或者192.168.0.100都可 ...
IE6 png图片实现半透明的方法
IE6中支持PNG半透明图片完美解决方法-divcss5亲測从IE7及IE7以上版本号都支持PNG半透明格式图片,而只有IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由 ...
ZOJ 3829 Known Notation 乱搞
乱搞: 1.数字的个数要比*的个数多一个,假设数字不足须要先把数字补满 2.最优的结构应该是数字都在左边,*都在右边 3.从左往右扫一遍,遇到数字+1,遇到*-1,假设当前值<1则把这个*和最后 ...
Excel 公式(细节若干)
查找与引用: 1.如果需要找出匹配元素的位置而不是匹配元素本身,则应该使用 MATCH 函数而不是 LOOKUP 函数. 2.VLOOKUP的第一个参数允许使用通配符“*”来表示包含的意思,把*放在字 ...
利用Ihttpmodel实现网站缓存,解决Server.Transfer 直接输出HTML源代码的问题
今天在用.NET利用IHttpModel实现网站静态缓存的时候,不知道最后为什么用 Server.Transfer(html)的时候结果输出的是HTML的源代码. 贴上源代码 using System ...
.Net 社区虚拟大会”(dotnetConf)
.Net 社区虚拟大会”(dotnetConf) “.Net 社区虚拟大会”(dotnetConf) 2016 今天凌晨在Channel9 上召开,在Scott Hunter的30分钟的 Keynot ...

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

纯JS实现的3D标签云，不依赖不论什么第三方库，支持移动页面的更多相关文章

随机推荐

热门专题