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 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
基于xcache的配置与使用详解
2013/06/18 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php中curl使用指南
2015/02/05 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
用js编写留言板
2020/03/17 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Viking比利时:购买办公用品
2019/10/30 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
为什么要做架构设计
2015/07/08 面试题
公务员培训自我鉴定
2013/09/19 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
检察院起诉意见书
2015/05/20 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
python使用torch随机初始化参数
2022/03/22 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技