javascript实现动态标签云


Posted in Javascript onOctober 16, 2015

今天上学校的图书馆,看到了一个好玩的东西,特意百度了下,发现叫做“标签球”,效果图为:

javascript实现动态标签云

直接代码如下:

CSS:

#div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; }
#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: #FFF; }
#div1 .blue {color:blue;}
#div1 .red {color:red;}
#div1 .green {color:green;}

HTML:

<div id="div1">
  <a href="#">标签云</a>
  <a href="#" class="red">PHP</a>
  <a href="#">瀑布流</a>
  <a href="#">Tab</a>
  <a href="#" class="blue">流体布局</a>
  <a href="#">SEO</a>
  <a href="#" class="red">彩蛋</a>
  <a href="#" class="green">JavaScript</a>
  <a href="#">miaov</a>
  <a href="#" class="red">CSS</a>
  <a href="#">asp.net</a>
  <a href="#" class="blue">蓝色经典</a>
  <a href="#">OOP</a>
  <a href="#" class="red">Android</a>
  <a href="#" class="blue">妙味茶馆</a>
  <a href="#">dialog</a>
  <a href="#" class="blue">淘客</a>
  <a href="#">Pin</a>
  <a href="#">微博</a>
  <a href="#" class="green">IPhone</a>
</div>

JS

$(document).ready(function() {
  $("#div1").windstagball({
      radius:120,
      speed:10
    });
  });

首先得写好布局,最外层div样式position设置为relative

内层元素position为absolute,这样才能形成效果,top为0,left为0
先导入jquery文件,再导入相应的插件文件
获取$("#xxx")元素,并调用windstagball()函数,radius是标签球的变径大小,speed顾名思义就是运动的速度。

附上js插件

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);
}
Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 #Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 #Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 #Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 #Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 #Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 #Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 #Javascript
You might like
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Python备份Mysql脚本
2008/08/11 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python处理大日志文件
2019/07/23 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
2014年教师节寄语
2014/04/03 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
储备店长岗位职责
2015/04/14 职场文书
毕业生学校组织意见
2015/06/04 职场文书
创业计划书之废品回收
2019/09/26 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android