首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现的圆形浮动标签云效果实例

Posted in Javascript onAugust 06, 2015

本文实例讲述了JavaScript实现的圆形浮动标签云效果。分享给大家供大家参考。具体如下：

这里介绍的JS标签云效果，在鼠标的作用下会自动转动，整体上围绕成一个圆形，各个标签之间无需Div代码，直接文字+链接的形式，有多少就显示多少，JavaScript会自动调整显示数量，让视觉效果最佳。

运行效果如下图所示：

JavaScript实现的圆形浮动标签云效果实例

具体代码如下：

<!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=gb2312" />
<title>js关键字球状旋转效果</title>
<style>
body{background:#09c;}
#div1{height:400px;width:450px; position:relative; margin:10px auto;}
#div1 a{position:absolute;top:0px;left:0px;color:#fff;font-weight:bold;padding:3px 6px;}
#div1 a:hover{border:1px solid #eee;background:#000;border-radius:5px;}
</style>
<script type="text/javascript">
var radius = 150;
var dtr = Math.PI/180;
var d=300;
var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=2;
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);
}
</script>
</head>
<body>
<!-- 代码开始 --> 
<div id="div1">
<a href="#" target="_blank">起名取名</a>
<a href="#" target="_blank">宣传策划</a>
<a href="#" target="_blank">网游试玩</a>
<a href="#" target="_blank">短信表白</a>
<a href="#" target="_blank">外语翻译</a>
<a href="#" target="_blank">产品推广</a>
<a href="#" target="_blank">网络营销</a>
<a href="#" target="_blank">动漫设计</a>
<a href="#" target="_blank">招聘求职</a>
<a href="#" target="_blank">家居装修</a>
<a href="#" target="_blank">影视创作</a>
<a href="#" target="_blank">照片美化</a>
<a href="#" target="_blank">产品设计</a>
<a href="#" target="_blank">包装设计</a>
<a href="#" target="_blank">Logo设计</a>
<a href="#" target="_blank">海报设计</a>
<a href="#" target="_blank">程序开发</a>
<a href="#" target="_blank">网站开发</a>
<a href="#" target="_blank">配音配词</a>
<a href="#" target="_blank">产品推广</a>
<a href="#" target="_blank">网络营销</a>
<a href="#" target="_blank">动漫设计</a>
<a href="#" target="_blank">家居装修</a>
<a href="#" target="_blank">影视创作</a>
<a href="#" target="_blank">照片美化</a>
</div>
<!-- 代码结束 -->
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript实现的圆形浮动标签云效果实例

- Author -

皮蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
一个简单的js树形菜单
Dec 09 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
Feb 16 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
javascript跨域方法、原理以及出现问题解决方法（详解）
Aug 06 #Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 #Javascript
js实现网页抽奖实例
Aug 05 #Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 #Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 #Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 #Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 #Javascript
反向代理(2) 压力测试(1) 防盗链(1) 二级域名(1) 默认端口(3) 前后端分离(1) shell(3) reload(1) 生成缩略图(1) 负载均衡(6)
You might like
php获取网页内容方法总结
2008/12/04 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
用javascript实现画板的代码
2007/09/05 Javascript
img的onload的另类用法
2008/01/10 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
JavaScript 学习笔记（九）call和apply方法
2010/01/11 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
对numpy中shape的深入理解
2018/06/15 Python
Python中按键来获取指定的值
2019/03/02 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
如何在Python对Excel进行读取
2020/06/04 Python
安全施工标语
2014/06/07 职场文书
弄虚作假心得体会
2014/09/10 职场文书
走群众路线剖析材料
2014/10/09 职场文书
升学宴答谢词
2015/01/05 职场文书
合作合同协议书范本
2015/01/27 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
网吧员工管理制度
2015/08/05 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android