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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
单线程JavaScript实现异步过程详解
May 19 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新手谈谈我的学习心得
2007/02/25 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
javascript下function声明一些小结
2007/12/28 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python实现在windows下操作word的方法
2015/04/28 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python 安装impala包步骤
2020/03/28 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
大学生先进事迹材料
2014/02/16 职场文书
献爱心活动总结
2014/05/07 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
认真学习保证书
2015/02/26 职场文书
2015年个人思想总结
2015/03/09 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python