以前只看到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. hdu1006 Tick and Tick

    原题链接 Tick and Tick 题意 计算时针.分针.秒针24小时之内三个指针之间相差大于等于n度一天内所占百分比. 思路 每隔12小时时针.分针.秒针全部指向0,那么只需要计算12小时内的百分 ...

  2. PV和UV的简单记录

    1.什么是PV值 PV(page view)即页面浏览量或点击量,是衡量一个网站或网页用户访问量.具体的说,PV值就是所有访问者在24小时(0点到24点)内看了某个网站多少个页面或某个网页多少次.PV ...

  3. mac的一些小技巧

    切换到超级管理员: sudo -s: 让你很快的全屏之间进行切换!很方便!很实用! command+tab 今天的感觉到公司的每一个人员,对于mac的系统的使用都是非常的熟悉的,我还什么都不会. 我得 ...

  4. NewLife.XCode 上手指南2018版（二）增

    目录 NewLife.XCode 上手指南2018版(一)代码生成 NewLife.XCode 上手指南2018版(二)增 NewLife.XCode 上手指南2018版(三)查 NewLife.XC ...

  5. trigger click 和 click 的区别？？

    trigger click 和 user click 有什么区别吗? 好像没有的.直到发现了这样一段代码. <button class="btn1">Button< ...

  6. linux HAProxy及Keepalived热备

    HAProxy 它是免费,快速且可靠的一种解决方案没,适用于那些负载特大的web站点这些站点通常又需要会话保持或七层处理提供高可用性,负载均衡及基于tcp和http应用的代理 衡量负载均衡器性能的因素 ...

  7. Android4种网络连接方式HttpClient、HttpURLConnection、OKHttp和Volley优缺点和性能对比

    比较的指标: 1.cpu 2.流量 3.电量 4.内存占用 5.联网时间 功能点: 1.重试机制 2.提供的扩展功能 3.易用性 4.是否https 5.是否支持reflect api,OkHttp有 ...

  8. 解析Java中的String、StringBuilder、StringBuffer类（一）

    引言 String 类及其相关的StringBuilder.StringBuffer 类在 Java 中的使用相当的多,在各个公司的面试中也是必不可少的.因此,在本周,我打算花费一些时间来认真的研读一 ...

  9. 学习笔记：Vue+Node+Mongodb构建简单商城系统（一）

    所需前置知识: HTML.CSS.JS.Vue.ES6.Npm.Webpack.Node.Express.Mongodb 项目整体架构: IDE:webstorm: 项目建立过程(cmd常用命令行指令 ...

  10. Openstack_O版(otaka)部署_Nova部署

    控制节点配置 1. 建库建用户 CREATE DATABASE nova_api; CREATE DATABASE nova; GRANT ALL PRIVILEGES ON nova_api.* T ...