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 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
js中replace的用法总结
Dec 27 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
Vue修改项目启动端口号方法
Nov 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
网络资源
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
php 生成文字png图片的代码
2011/04/17 PHP
PDO实现学生管理系统
2020/03/21 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
深入理解js promise chain
2016/05/05 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
Django学习笔记之Class-Based-View
2017/02/15 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python实现Dijkstra算法
2018/10/17 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Django实现学员管理系统
2019/02/26 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python logging日志模块原理及操作解析
2019/10/12 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
药学专业大学生自荐信
2013/09/28 职场文书
会计毕业生自荐信
2013/11/21 职场文书
社会调查研究计划书
2014/05/01 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python