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

随机推荐

HDU1878 欧拉回路 - from lanshui_Yang
Problem Description 欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input 测试输入包含若干测试用例.每个 ...
BZOJ 1704: [Usaco2007 Mar]Face The Right Way 自动转身机( 贪心 )
贪心...先枚举k, 然后从左往右扫一遍, 发现位置p的牛的状态不符合就将 [p, p + k ) 的牛都转身, 假如p + k - 1 已经超过了最右边牛的位置那这个k就不符合要求. 符合要求的就可 ...
mysql事务和锁InnoDB(转)
背景 MySQL/InnoDB的加锁分析,一直是一个比较困难的话题.我在工作过程中,经常会有同事咨询这方面的问题.同时,微博上也经常会收到MySQL锁相关的私信,让我帮助解决一些死锁的问题.本文,准备 ...
Git命令非主流札记
使用git做开发的版本管理也有一年半之多了,但是始终都是常用的branch commit status diff push等一些再常用不过的命令,最近闲下来,打算学习一下高端用法,所以就静下心来好好读 ...
高斯拉普拉斯算子（Laplace of Gaussian）
高斯拉普拉斯(Laplace of Gaussian) kezunhai@gmail.com http://blog.csdn.net/kezunhai Laplace算子作为一种优秀的边缘检测算子, ...
《Javascript权威指南》学习笔记之十二：数组、多维数组和符合数组（哈希映射）
Array(数组)是JavaScript中较为复杂的数据类型,同Java.C#.VB等程序语言的数组相比.Javascript数组中的元素不必为同样的数据类型,能够在数组每一个元素上混合使用数字.日期 ...
Ubuntu 安装启动Tomcat
首先下载ubuntu 的tar包官网: http://tomcat.apache.org/download-80.cgi 安装启动 1 .下载对应的tar 2 .解压任意文件夹下,更改名字tomca ...
异步的两种写法: async 与 BeginInvoke
现在要实现异步只要用关键字async/await就可以轻松实现,在此之前需要用到委托/回调等一堆东西. 对一下是对比写法: class Program { delegate string SendMe ...
基于visual Studio2013解决面试题之1402选择排序
题目
ul不加宽高
ul可以不加宽高,但是不能用margin(上下左右), 可以用margin(左右),否则里面的内容如果是要左右浮动的话,就会掉下来

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

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

随机推荐

热门专题