js简单实现标签云效果实例


Posted in Javascript onAugust 06, 2015

本文实例讲述了js简单实现标签云效果。分享给大家供大家参考。具体如下:

这里的JavaScript标签云,基于妙味课堂miaov.js文件,非常流行的网页效果,在网页的右侧或左侧开辟一小块地方,用来显示热门的标签,形式就选择标签云吧,绝对酷哦,相信你也会喜欢。

运行效果如下图所示:

js简单实现标签云效果实例

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js标签云</title>
<style>
body {background: #000;}
#div1 {position:relative; width:450px; height:450px; margin: 20px auto 0; }
#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 3px 6px; }
#div1 a:hover {border: 1px solid #eee; background: #000; }
#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; }
p a:hover {color:red; }
</style>
<script type="text/javascript" src="miaov.js"></script>
</head>
<body>
<div id="div1">
  <a href="#">JS课程</a>
  <a href="#" class="red">教程</a>
  <a href="#">回头一眸</a>
  <a href="#">精品</a>
  <a href="#" class="blue">源码下载</a>
  <a href="#">SEO</a>
  <a href="#" class="red">特效</a>
  <a href="#">继承</a>
  <a href="#" class="red">三水点靠木</a>
  <a href="#" class="blue">OOP</a>
  <a href="#">XHTML</a>
  <a href="#">W3C</a>
  <a href="#">石川</a>
  <a href="#" class="yellow">人生如歌</a>
  <a href="#">blue</a>
</div>
</body>
</html>

miaov.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程序设计有所帮助。

Javascript 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Sort()函数的多种用法
Mar 20 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
Vue简单实现原理详解
May 07 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 #Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 #Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 #Javascript
js实现网页抽奖实例
Aug 05 #Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 #Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 #Javascript
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
oracle资料库函式库
2006/10/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python 爬取微信文章
2016/01/30 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
解决python 找不到module的问题
2020/02/12 Python
python实现经典排序算法的示例代码
2021/02/07 Python
英国领先的游戏零售商:GAME
2019/09/24 全球购物
教师反腐倡廉演讲稿
2014/09/03 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2016新年问候语大全
2015/11/11 职场文书
学校教代会开幕词
2016/03/04 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android