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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
react中使用swiper的具体方法
May 15 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JS实现打字游戏
Dec 17 Javascript
js实现弹窗效果
Aug 09 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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
PHP入门学习笔记之一
2010/10/12 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
基于树莓派的语音对话机器人
2019/06/17 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python实现最速下降法
2020/03/24 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
中秋晚会策划方案
2014/06/12 职场文书
党员证明模板
2015/06/19 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书