以前只看到wordpress上面有个标签云的效果挺6，就好奇的弄个试试，还好网上有很多小伙伴的分享了，借鉴过来了  哈哈

html代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style type="text/css">

        #div1 {position:relative; width:800px; height:800px; border:1px solid #000; margin: 20px auto 0; }

        #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px 6px; }

        #div1 a:hover {border: 1px solid #eee; background: #FFF; }

        #div1 .blue {color:blue;}

        #div1 .red {color:red;}

        #div1 .green {color:green;}

    </style>

    <body>

        <div id="div1">

          <a href="#">标签云</a>

          <a href="#" class="red">PHP</a>

          <a href="#">瀑布流</a>

          <a href="#">Tab</a>

          <a href="#" class="blue">流体布局</a>

          <a href="#">SEO</a>

          <a href="#" class="red">彩蛋</a>

          <a href="#" class="green">IPhone</a>

        </div>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript" src="bqy.js"></script>

</html>

下面是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);

}

直接用就好了。。标签云大小的控制在js文件里，有个坐标变换，

 mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi)*55;

 mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi)*55;

 mcList[i-1].cz = radius * Math.cos(phi)*55;

在后面乘以想要放大缩小的系数就好了，默认居中的。。

js 标签云的更多相关文章

  1. js 标签云效果

    下载:http://files.cnblogs.com/zjfree/js_tag_list.rar 效果如下: 源码如下: <html> <head> <meta ht ...

  2. js实现动态球形标签云

    HTML 原文演示地址:http://www.17sucai.com/pins/demoshow/8108 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

  4. 很不错标签云js插件

    在蓝色看到有需要标签云的球形效果,我记得之前在网上见到过,印象比较深刻,就找出地址发给他了,接下来却还有人需要这个效果的JQuery插件,网上好像也有,但是我看现在这个就不错,就想想自己改成jquer ...

  5. Python3.7+jieba(结巴分词)配合Wordcloud2.js来构造网站标签云(关键词集合)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_138 其实很早以前就想搞一套完备的标签云架构了,迫于没有时间(其实就是懒),一直就没有弄出来完整的代码,说到底标签对于网站来说还是 ...

  6. 纯JS实现的3D标签云，不依赖不论什么第三方库，支持移动页面

    <span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC &q ...

  7. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  8. 在hexo静态博客中利用d3-cloud来展现标签云

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

  9. 3D球状标签云（兼容IE8）

    看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...

随机推荐

  1. Hi3531用SPI FLASH启动 使用Nand做文件系统

    1.编译内核(可选) make ARCH=arm CROSS_COMPILE=arm-hisiv200-linux- menuconfig make ARCH=arm CROSS_COMPILE=ar ...

  2. Naive Bayes (NB Model) 初识

    1,Bayes定理 P(A,B)=P(A|B)P(B); P(A,B)=P(B|A)P(A); P(A|B)=P(B|A)P(A)/P(B);    贝叶斯定理变形 2,概率图模型 2.1  定义 概 ...

  3. 利用ICSharpCode.SharpZipLib进行压缩

    #ZipLib is a Zip, GZip, Tar and BZip2 library written entirely in C# for the .NET platform. It is im ...

  4. C#数据缓存介绍及Caching通用帮助类整理

    C#缓存主要是为了提高数据的读取速度.因为服务器和应用客户端之间存在着流量的瓶颈,所以读取大容量数据时,使用缓存来直接为客户端服务,可以减少客户端与服务器端的数据交互,从而大大提高程序的性能. 以下为 ...

  5. java 堆 栈 常量池

    java 堆中保存new 出来的对象(每个对象都包含一个与之对应的class的信息,[class信息存放在方法区]),堆中分配的内存,有虚拟机的自动垃圾回收器管理,栈内存只对其所属线程可见. java ...

  6. pat1011-1020

    一开始几道题写到吐血,真的自己现在好弱 1011 水题不说了 #include<bits/stdc++.h> using namespace std; const int N = 105; ...

  7. 三十天学不会TCP,UDP/IP网络编程 - 绅士的开始

    经过了过年的忙碌和年初的懈怠一切的日子,我又开始重新更新了~这是最新的一篇~完整版可以去gitbook(https://www.gitbook.com/@rogerzhu/)看到. 如果对和程序员有关 ...

  8. 浅谈JS中的浅拷贝与深拷贝

    前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...

  9. 编译器重复定义错误：error C2371: 'SIZE' : redefinition; different basic types

    我们常常会定义自己工程用的数据类型,可能会与Windows的基本数据类型冲突. vs会报重复定义错误:error C2371: 'SIZE' : redefinition; different bas ...

  10. Linux之磁盘与文件系统管理

    磁盘及文件系统管理详解 [参考文献:马哥视频] 原文:http://blog.csdn.net/u013008795/article/details/51150075 目前市场上主流的磁盘是机械式硬盘 ...