纯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> ...

随机推荐

Codeforces 437C The Child and Toy(贪心)
题目连接:Codeforces 437C The Child and Toy 贪心,每条绳子都是须要割断的,那就先割断最大值相应的那部分周围的绳子. #include <iostream> ...
3522: [Poi2014]Hotel( 树形dp )
枚举中点x( 即选出的三个点 a , b , c 满足 dist( x , a ) = dist( x , b ) = dist( x , c ) ) , 然后以 x 为 root 做 dfs , 显 ...
JVM--常见的虚拟机回收算法
Serial GC -XX:+UseSerialGC 这样就设置为了串行GC回收方式,这种方式在Client模式下是默认的. 一般是使用在单机程序,小内存,CPU个数少的机器上. 没有复杂的算法,只用 ...
NET Core 构成体系
NET Core 构成体系简析 .NET Core 构成体系 Roslyn 编译器 RyuJIT 编译器 CoreCLR & CoreRT CoreFX(.NET Core Librarie ...
JVM调优总结（十一）-反思
垃圾回收的悖论所谓“成也萧何败萧何”.Java的垃圾回收确实带来了很多好处,为开发带来了便利.但是在一些高性能.高并发的情况下,垃圾回收确成为了制约Java应用的瓶颈.目前JDK的垃圾回收算法,始终 ...
基于visual Studio2013解决算法导论之007优先队列（堆实现）
题目优先队列解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> #in ...
GDSOI2015 task4 ACU
题目大意只要你有耐心看完题目,你就可以得到以下模型: 给出一个有向图,有若干询问,每次询问对于某条边\((v,u)\),求删掉这条边后,\(v\)到\(u\)的最短路. 算法1 暴力出奇迹,期望得分 ...
Swift - 使用UI Dynamics给UIKit组件添加移动吸附行为
UI Dynamics是UIKit的一个新组成部分,它向iOS中的视图提供了与物理学有关的功能和动画.可以让你向视图中引入力和物理属性,可以让你的视图弹跳,舞动,受重力影响等等. 下面通过样例,演示使 ...
iTunes Store：隐藏和取消隐藏已购项目
使用 Mac 或 PC 上的 iTunes 来隐藏或取消隐藏已购项目. 如何隐藏已购项目在 Mac 或 PC 上打开 iTunes. 从 Store 菜单中,选取商店 > 登录,然后输入您的 ...
超详细SDK Hello World
Windows应用程序的基本运行机制与HelloWin程序详细解总的来说最基本的Windows应用程序的运行执行顺序总是以如下的基本顺序执行的. 顺序结构: 调用WinMain函数开始执行--à定义 ...

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

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

随机推荐

热门专题