zoukankan      html  css  js  c++  java
  • 纯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; 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



  • 相关阅读:
    如何用php启动exe程序,并在进程中查看?
    如何用原生js或jquery设置select的值
    php5 升级 php7 版本遇到的问题处理方法总结
    phpexcel 读取日期的问题?
    PHPExcel_Reader_Exception: is not recognised as an OLE file in Classes问题解决方法
    QT Unexpected CDB exit 问题的解决办法
    html调用摄像头的方法汇总
    win7 32位 安装opencv-python后,运行时提示 "from .cv2 import *: DLL load failed: 找不到指定的模块" 的解决办法
    centos7 crontab 定时执行python任务不执行的原因及解决办法
    centos 7 生成文件名乱码的问题如何解决?
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5129776.html
Copyright © 2011-2022 走看看