js和jquery常用3D标签云代码实例总结

2016-2-14 Jon js+jquery+ajax

js常用3D标签云1

  <!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=utf-8" />
  <title>js常用3D标签云1</title>
  <style type="text/css">
  body{ font-family:"微软雅黑", Arial, sans-serif;} #main{border:none; background:none;}
  body,ul,li,h1,h2,h3,p,form{margin:0;padding:0;}body{background:#fbfbfb;color:#444;font-size:14px;}
  a{color:#444;text-decoration:none;}a:hover{color:red;}
  /* tagscloud */
  #tagscloud{width:250px;height:260px;position:relative;font-size:12px;color:#333;margin:20px auto 0;text-align:center;}
  #tagscloud a{position:absolute;top:0px;left:0px;color:#333;font-family:Arial;text-decoration:none;margin:0 10px 15px 0;line-height:18px;text-align:center;font-size:12px;padding:1px 5px;display:inline-block;border-radius:3px;}
  #tagscloud a.tagc1{background:#666;color:#fff;}
  #tagscloud a.tagc2{background:#F16E50;color:#fff;}
  #tagscloud a.tagc5{background:#006633;color:#fff;}
  #tagscloud a:hover{color:#fff;background:#0099ff;}
  </style>
  </head>
  <body>
  <div id="tagscloud">
    <a href="javascript:;" class="tagc1">银行存款利率</a>
    <a href="javascript:;" class="tagc2">银行利率</a>
    <a href="javascript:;" class="tagc5">银行贷款利率</a>
    <a href="javascript:;" class="tagc2">银行存款利率<a>
    <a href="javascript:;" class="tagc2">银行利率</a>
    <a href="javascript:;" class="tagc1">不孕不育</a>
    <a href="javascript:;" class="tagc2">银行存款利率</a>
    <a href="javascript:;" class="tagc5">银行贷款利率</a>
    <a href="javascript:;" class="tagc2">银行利率</a>
    <a href="javascript:;" class="tagc2">房贷利率2013</a>
    <a href="javascript:;" class="tagc5">银行存款利率表</a>
    <a href="javascript:;" class="tagc2">银行贷款利率表</a>
    <a href="javascript:;" class="tagc1">银行存款利率</a>
    <a href="javascript:;" class="tagc2">银行利率</a>
    <a href="javascript:;" class="tagc5">银行贷款利率</a>
    <a href="javascript:;" class="tagc2">银行存款利率<a>
    <a href="javascript:;" class="tagc2">银行利率</a>
    <a href="javascript:;" class="tagc1">不孕不育</a>
    <a href="javascript:;" class="tagc2">银行存款利率</a>
    <a href="javascript:;" class="tagc5">银行贷款利率</a>
    <a href="javascript:;" class="tagc2">银行利率</a>
    <a href="javascript:;" class="tagc2">房贷利率2013</a>
    <a href="javascript:;" class="tagc5">银行存款利率表</a>
    <a href="javascript:;" class="tagc2">银行贷款利率表</a>
  </div>
  <!-- tags.js -->
  <script>
    var radius = 90;
    var d = 200;
    var dtr = Math.PI / 180;
    var mcList = [];
    var lasta = 1;
    var lastb = 1;
    var distr = true;
    var tspeed = 11;
    var size = 200;
    var mouseX = 0;
    var mouseY = 10;
    var howElliptical = 1;
    var aA = null;
    var oDiv = null;
    window.onload=function ()
    {
      var i=0;
      var oTag=null;
      oDiv=document.getElementById('tagscloud');
      aA=oDiv.getElementsByTagName('a');
      for(i=0;i<aA.length;i++)
      {
        oTag={};
        aA[i].onmouseover = (function (obj) {
          return function () {
            obj.on = true;
            this.style.zIndex = 9999;
            this.style.color = '#fff';
            this.style.padding = '5px 5px';
            this.style.filter = "alpha(opacity=100)";
            this.style.opacity = 1;
          }
        })(oTag)
        aA[i].onmouseout = (function (obj) {
          return function () {
            obj.on = false;
            this.style.zIndex = obj.zIndex;
            this.style.color = '#fff';
            this.style.padding = '5px';
            this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
            this.style.opacity = obj.alpha;
            this.style.zIndex = obj.zIndex;
          }
        })(oTag)
        oTag.offsetWidth = aA[i].offsetWidth;
        oTag.offsetHeight = aA[i].offsetHeight;
        mcList.push(oTag);
      }
      sineCosine( 0,0,0 );
      positionAll();
      (function () {
                update();
                setTimeout(arguments.callee, 40);
            })();
    };
    function update()
    {
      var a, b, c = 0;
            a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
            b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
            lasta = a;
            lastb = b;
            if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
                return;
            }
            sineCosine(a, b, c);
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var rx1 = mcList[i].cx;
                var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
                var rz1 = mcList[i].cy * sa + mcList[i].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[i].cx = rx3;
                mcList[i].cy = ry3;
                mcList[i].cz = rz3;

                per = d / (d + rz3);

                mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
                mcList[i].y = ry3 * per;
                mcList[i].scale = per;
                var alpha = per;
                alpha = (alpha - 0.6) * (10 / 6);
                mcList[i].alpha = alpha * alpha * alpha - 0.2;
                mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
            }
            doPosition();
    }
    function positionAll()
    {
      var phi = 0;
        var theta = 0;
        var max = mcList.length;
        for (var i = 0; i < max; i++) {
            if (distr) {
                phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
                theta = Math.sqrt(max * Math.PI) * phi;
            } else {
                phi = Math.random() * (Math.PI);
                theta = Math.random() * (2 * Math.PI);
            }
            //坐标变换
            mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
            mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
            mcList[i].cz = radius * Math.cos(phi);

            aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
            aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
        }
    }
    function doPosition()
    {
      var l = oDiv.offsetWidth / 2;
            var t = oDiv.offsetHeight / 2;
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var aAs = aA[i].style;
                if (mcList[i].alpha > 0.1) {
                    if (aAs.display != '')
                        aAs.display = '';
                } else {
                    if (aAs.display != 'none')
                        aAs.display = 'none';
                    continue;
                }
                aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
                aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
                //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
                //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
                aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
                aAs.zIndex = mcList[i].zIndex;
                aAs.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>
  </body>
  </html>

您可以修改框中代码后运行查看

js常用3D标签云2

  <!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=utf-8" />
  <title>js标签云</title>
  <style type="text/css">
    #tagbox{position:relative;margin:10px auto 0px;height:250px;}
    #tagbox a{position:absolute;padding:3px 6px;color:#87b126;top:0px;text-decoration:none;left:0px}
    #tagbox a:hover{border:#fff 1px solid;background:#000;color:#fff;}
    #tagbox .color1{color:#393c3c}
    #tagbox .color2{color:#e05656}
    #tagbox .color3{color:#87b126}
    #tagbox .color4{color:#d86135}
    #tagbox .color5{color:#17a6c2}
    #tagbox .color6{color:#804a99}
  </style>
  </head>
  <body>
  <script type="text/javascript" src="tags.js"></script>
  <div id="tagbox">
    <a href="#">美女</a>
    <a class="color1" href="#">写真</a>
    <a class="color5" href="#">贴图</a>
    <a class="color3" href="#">灌水</a>
    <a class="color1" href="#">大片</a>
    <a href="#">小说</a>
    <a class="color2" href="#">欧美</a>
    <a class="color4" href="#">日韩</a>
    <a href="#">诱人</a>
    <a class="color5" href="#">搞笑</a>
    <a href="#">性感</a>
    <a class="color1" href="#">壁纸</a>
    <a class="color5" href="#">泳装</a>
    <a class="color2" href="#">言情</a>
    <a class="color3" href="#">浪漫</a>
    <a class="color4" href="#">耽美</a>
    <a class="color1" href="#">爆笑</a>
    <a class="color2" href="#">美眉</a>
    <a class="color4" href="#">同人</a>
    <a class="color5" href="#">武侠</a>
    <a class="color4" href="#">魔幻</a>
    <a href="#">教案</a>
    <a href="#">论文</a>
    <a class="color3" href="#">妩媚</a>
    <a href="#">黑丝</a>
    <a href="#">诱惑</a>
    <a class="color1" href="#">科幻</a>
    <a class="color2" href="#">恐怖</a>
    <a class="color2" href="#">性感</a>
    <a class="color3" href="#">TXT下载</a>
    <a href="#">音乐</a>
    <a class="color4" href="#">游戏</a>
    <a class="color5" href="#">CG资源</a>
    <a href="#">YunFile</a>
    <a href="#">课件</a>
    <a href="#">幽默</a>
    <a ref="#">波霸</a>
    <a href="#">私人照</a>
    <a href="#">名校</a>
    <a class="color2" href="#">赚钱</a>
    <a class="color3" href="#">千脑</a>
    <a class="color4" href="#">清純</a>
    <a class="color5" href="#">云电脑</a>
  </div>
  <!-- tags.js -->
  <script>
    var radius = 100,
        dtr = Math.PI/180,
        d=200,
        mcList = [],
        active = false,
        lasta = 1,
        lastb = 1,
        distr = true,
        tspeed=5,
        size=250,
        mouseX=0,
        mouseY=0,
        howElliptical=1,
        aA=null,
        oDiv=null;
    window.onload=function ()
    {
      var i=0;
      var oTag=null;
      oDiv=document.getElementById('tagbox');
      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>
  </body>
  </html>

您可以修改框中代码后运行查看

jquery常用3D标签云TagCloud..js

  <!doctype html public "lice">
  <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
  <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  <head>
  <meta charset="utf-8">
  <title>jquery tagcloud plugin demo</title>
  <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <style>*{resize:none;border:none;outline:none;text-decoration:none;padding:0px;margin:0px;list-style-type:none;}</style>
  <script type="text/javascript">
      var settings = {
      //height of sphere container
      height: 400,
      //width of sphere container
      width: 400,
      //radius of sphere
      radius: 150,
      //rotation speed
      speed: 3,
      //sphere rotations slower
      slower: 0.9,
      //delay between update position
      timer: 5,
      //dependence of a font size on axis Z
      fontMultiplier: 15,
      //tag css stylies on mouse over
      hoverStyle: {
          border: 'none',
          color: '#0b2e6f'
      },
      //tag css stylies on mouse out
      mouseOutStyle: {
          border: '',
          color: ''
      }
      };
      $(document).ready(function(){
          $('#tagcloud').tagoSphere(settings);
      });
  </script>
  </head>
  <body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <h1 style=" text-align:center">jquery tagcloud plugin demo</h1>
  <div id="tagcloud" style="margin:0px auto">
  <ul>
  <li><a href="#">dazzlingly</a></li>
  <li><a href="#">ultimity</a></li>
  <li><a href="#">Orleanist</a></li>
  <li><a href="#">cephalogenesis</a></li>
  <li><a href="#">willyer</a></li>
  <li><a href="#">unhustling</a></li>
  <li><a href="#">polydactylism</a></li>
  <li><a href="#">scriever</a></li>
  <li><a href="#">spantoon</a></li>
  <li><a href="#">Goclenian</a></li>
  <li><a href="#">outdoor</a></li>
  <li><a href="#">unbeknownst</a></li>
  <li><a href="#">convictiveness</a></li>
  <li><a href="#">scrotitis</a></li>
  <li><a href="#">Tabriz</a></li>
  <li><a href="#">bigener</a></li>
  <li><a href="#">chiefly</a></li>
  <li><a href="#">bearess</a></li>
  <li><a href="#">untrussed</a></li>
  <li><a href="#">clericality</a></li>
  <li><a href="#">lagen</a></li>
  <li><a href="#">Gervas</a></li>
  <li><a href="#">rerebrace</a></li>
  <li><a href="#">mott</a></li>
  <li><a href="#">vertimeter</a></li>
  <li><a href="#">tormentous</a></li>
  <li><a href="#">jagua</a></li>
  <li><a href="#">stromatology</a></li>
  <li><a href="#">nonstatic</a></li>
  <li><a href="#">rangey</a></li>
  <li><a href="#">overzealous</a></li>
  <li><a href="#">manufacturess</a></li>
  <li><a href="#">affrighter</a></li>
  <li><a href="#">Zirbanit</a></li>
  <li><a href="#">paradigmatic</a></li>
  <li><a href="#">unexpressive</a></li>
  <li><a href="#">Gelidiaceae</a></li>
  <li><a href="#">noodledom</a></li>
  <li><a href="#">deoxygenation</a></li>
  <li><a href="#">endoneurial</a></li>
  <li><a href="#">convenee</a></li>
  <li><a href="#">leapable</a></li>
  <li><a href="#">maxilliform</a></li>
  <li><a href="#">filching</a></li>
  <li><a href="#">unavoidably</a></li>
  <li><a href="#">szlachta</a></li>
  <li><a href="#">azotoluene</a></li>
  <li><a href="#">inchoate</a></li>
  <li><a href="#">strikeless</a></li>
  <li><a href="#">gadding</a></li>
  </ul>
  </div>
  </body>
  </html>
  <!-- tagcloud.jquery.js -->
  <script>
    /**
     * jQuery TagCloud plugin
     *
     * @version 1.2.2 (12-MAY-2009)
     * @author Nurul Ferdous <nurul_ferdous@yahoo.com>
     * @requires jQuery v1.4.3 or later Examples and documentation at:
     * http://dynamicguy.com/ Dual licensed under the MIT and GPL
     * licenses: http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     *
     * Revision: $Id$
     */
    ;( function($) {
      var tags;
      var mathAssets = {
        halfHeight : null,
        halfWidth : null,
        hwratio : null,
        dtr : null,
        diameter : null,
        speedX : null,
        speedY : null,
        tLength : null
      }
      var settings = {
        //height of sphere container
        height : 400,
        //width of sphere container
        width : 400,
        //radius of sphere
        radius : 150,
        //rotation speed
        speed : 3,
        //sphere rotations slower
        slower : 0.9,
        //delay between update position
        timer : 5,
        //dependence of a font size on axis Z
        fontMultiplier : 15,
        //tag css stylies on mouse over
        hoverStyle : {
          border : '1px solid #935C26',
          color : '#935C26'
        },
        //tag css stylies on mouse out
        mouseOutStyle : {
          border : 'none',
          color : 'red'
        }
      }
      var curState = {
        mouseOver : null,
        lastFy : null,
        lastFx : null,
        sy : null,
        cy : null,
        sx : null,
        cx : null,
        mouseX : null,
        mouseY : null
      }
      var options = {};
      jQuery.fn.tagoSphere = function(opt) {
        options = jQuery.extend(settings, opt);
        initContainer(this);
        initTags(this);
        initMaths();
        deployTags();
        setInterval(updateTags, options.timer);
        return this;
      };
      function initMaths() {
        mathAssets.halfHeight = options.height / 2;
        mathAssets.halfWidth = options.width / 2;
        mathAssets.speedX = options.speed / mathAssets.halfWidth;
        mathAssets.speedY = options.speed / mathAssets.halfHeight;
        mathAssets.dtr = Math.PI / 180;
        mathAssets.diameter = options.radius * 2;
        mathAssets.hwratio = options.height / options.width;
        mathAssets.whratio = options.width / options.height;
        mathAssets.tLength = tags.length - 1;
        curState.mouseOver = false;
        curState.lastFx = options.speed;
        curState.lastFy = options.speed;
      }
      function initContainer(tagContainer) {
        tagContainer.height(options.height);
        tagContainer.width(options.width);
        tagContainer.css( {
          'overflow' : 'hidden',
          'position' : 'relative'
        });
        tagContainer.mousemove( function(e) {
          curState.mouseX = e.pageX - this.offsetLeft;
          curState.mouseY = e.pageY - this.offsetTop;
        });
        tagContainer.hover( function() {
          curState.mouseOver = true;
        }, function() {
          curState.mouseOver = false;
        });
      }
      function initTags(tagContainer) {
        tags = tagContainer.children('ul').children();
        tags.css( {
          'position' : 'absolute',
          'list-style-type' : 'none',
          'list-style-position' : 'outside',
          'list-style-image' : 'none'
        });
        for ( var i = 0; i < tags.length; i++) {
          var jTag = jQuery(tags[i]);
          var link = jQuery(jTag.children()[0]);
          tags[i] = jTag;
          jTag.hover( function() {
            jQuery(this).css(options.hoverStyle);
          }, function() {
            jQuery(this).css(options.mouseOutStyle);
          })
        }
      }
      function deployTags() {
        var phi = 0;
        var theta = 0;
        var max = mathAssets.tLength + 1;
        var i = 0;
        while (i++ < max) {
          phi = Math.acos(-1 + (2 * i - 1) / max);
          theta = Math.sqrt(max * Math.PI) * phi;
          tags[i - 1].cx = options.radius * Math.cos(theta) * Math.sin(phi);
          tags[i - 1].cy = options.radius * Math.sin(theta) * Math.sin(phi);
          tags[i - 1].cz = options.radius * Math.cos(phi);
          tags[i - 1].h = jQuery(tags[i - 1]).height() / 4;
          tags[i - 1].w = jQuery(tags[i - 1]).width() / 4;
        }
      }
      function calcRotation(fy, fx) {
        curState.sy = Math.sin(fy * mathAssets.dtr);
        curState.cy = Math.cos(fy * mathAssets.dtr);
        curState.sx = Math.sin(fx * mathAssets.dtr);
        curState.cx = Math.cos(fx * mathAssets.dtr);
      }
      function updateTags() {
        var fy;
        var fx;
        if (curState.mouseOver) {
          fy = options.speed - mathAssets.speedY * curState.mouseY;
          fx = mathAssets.speedX * curState.mouseX - options.speed;
        } else {
          fy = curState.lastFy * options.slower;
          fx = curState.lastFx * options.slower;
        }
        if (curState.lastFy != fy || curState.lastFx != fx) {
          calcRotation(fy, fx);
          curState.lastFy = fy;
          curState.lastFx = fx;
        }
        if (Math.abs(fy) > 0.01 || Math.abs(fx) > 0.01) {
          j = -1;
          while (j++ < mathAssets.tLength) {
            rx1 = tags[j].cx;
            ry1 = tags[j].cy * curState.cy + tags[j].cz * -curState.sy;
            rz1 = tags[j].cy * curState.sy + tags[j].cz * curState.cy;
            tags[j].cx = rx1 * curState.cx + rz1 * curState.sx;
            tags[j].cy = tags[j].cy * curState.cy + tags[j].cz
                * -curState.sy;
            tags[j].cz = rx1 * -curState.sx + rz1 * curState.cx;
            var per = mathAssets.diameter
                / (mathAssets.diameter + tags[j].cz);
            tags[j].x = tags[j].cx * per;
            tags[j].y = tags[j].cy * per;
            tags[j].alpha = per / 2;
            tags[j]
                .css( {
                  'left' : mathAssets.whratio
                      * (tags[j].x - tags[j].w * per)
                      + mathAssets.halfWidth,
                  'top' : mathAssets.hwratio
                      * (tags[j].y - tags[j].h * per)
                      + mathAssets.halfHeight,
                  'opacity' : tags[j].alpha,
                  'font-size' : options.fontMultiplier
                      * tags[j].alpha + 'px',
                  'z-index' : Math.round(-tags[j].cz)
                });
          }
        }
      }
    })(jQuery);
  </script>
  </body>
  </html>

您可以修改框中代码后运行查看

jquery常用3D标签云windstagball

  <!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=utf-8" />
  <title>标签云 - 标签球 - windstagball v1.0</title>
  <style type="text/css">
  body {background: #FFF }
  #div1 {position:relative; width:350px; height:350px; 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;}
  p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }
  p a { font-size: 14px; color: #ba0c0c; }
  p a:hover { color: red; }
  </style>
  <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  </head>
  <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">JavaScript</a>
    <a href="#">miaov</a>
    <a href="#" class="red">CSS</a>
    <a href="#">asp.net</a>
    <a href="#" class="blue">蓝色经典</a>
    <a href="#">OOP</a>
    <a href="#" class="red">Android</a>
    <a href="#" class="blue">妙味茶馆</a>
    <a href="#">dialog</a>
    <a href="#" class="blue">淘客</a>
    <a href="#">Pin</a>
    <a href="#">微博</a>
    <a href="#" class="green">IPhone</a>
  </div>
  <!-- jquery.windstagball -->
  <script>
    /**
    * JQuery.windstagball.js
    * @description : 源码和创作思路来源于miaov,作者只是改良为Jquery插件，方便喜欢用jquery插件的人使用
    * @author : miaov winds
    * @url : http://www.miaov.com/ http://www.lijian.net/
    * @qq : 342377
    * @version :v1.0
    * @create :2012.05.04
    */
    ; (function($) {
        $.fn.windstagball = function(options) {

            var defaults = {
                radius: 120,
                size: 300,
                speed: 10,
                depth: 300,
                howElliptical: 1,
                fontsize: 12
            },
            param = $.extend({}, defaults, options || {}),
            selector = $(this).selector,
            warp = $(this),
            items = $(selector + ' a'),
            dtr = Math.PI / 180,
            itemPosList = [],
            active = false,
            lasta = 1,
            lastb = 1,
            distr = true,
            mouseX = 0,
            mouseY = 0,
            sb, sa, sc, ca, cb, cc, oItem, oEvent, si;
            items.each(function() {
                oItem = {};
                oItem.width = $(this).width();
                oItem.height = $(this).height();
                itemPosList.push(oItem);
            });


            init();

            warp.mouseover(function() {
                active = true;
            });

            warp.mouseout(function() {
                active = false;
            });

            warp.mousemove(function(ev) {
                oEvent = window.event || ev;
                mouseX = oEvent.clientX - (warp.offset().left + warp.width() / 2);
                mouseY = oEvent.clientY - (warp.offset().top + warp.height() / 2);
                mouseX /= 5;
                mouseY /= 5;
            });

            setInterval(setPosition, 30);

            //初始化位置
            function init() {
                var phi = 0,
                theta = 0,
                max = itemPosList.length;
                sineCosine(0, 0, 0);
                //初始随机排序
                items.sort(function() {
                    return Math.random() < 0.5 ? 1 : -1;
                });

                items.each(function(i) {
                    if (distr) {
                        phi = Math.acos(-1 + (2 * i) / max);
                        theta = Math.sqrt(max * Math.PI) * phi;
                    }
                    else {
                        phi = Math.random() * (Math.PI);
                        theta = Math.random() * (2 * Math.PI);
                    }
                    itemPosList[i].cx = param.radius * Math.cos(theta) * Math.sin(phi);
                    itemPosList[i].cy = param.radius * Math.sin(theta) * Math.sin(phi);
                    itemPosList[i].cz = param.radius * Math.cos(phi);
                    $(this).css('left', itemPosList[i].cx + warp.width() / 2 - itemPosList[i].width / 2 + 'px');
                    $(this).css('top', itemPosList[i].cy + warp.height() / 2 - itemPosList[i].height / 2 + 'px');
                });
            };

            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);
            };

            function setPosition() {
                var a, b, c = 0, j, rx1, ry1, rz1, rx2, ry2, rz2, rx3, ry3, rz3, l = warp.width() / 2, t = warp.height() / 2;

                if (active) {
                    a = (-Math.min(Math.max(-mouseY, -param.size), param.size) / param.radius) * param.speed;
                    b = (Math.min(Math.max(-mouseX, -param.size), param.size) / param.radius) * param.speed;
                }
                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;
                }
                sineCosine(a, b, c);
                for (j = 0; j < itemPosList.length; j++) {
                    rx1 = itemPosList[j].cx;
                    ry1 = itemPosList[j].cy * ca + itemPosList[j].cz * (-sa);
                    rz1 = itemPosList[j].cy * sa + itemPosList[j].cz * ca;
                    rx2 = rx1 * cb + rz1 * sb;
                    ry2 = ry1;
                    rz2 = rx1 * (-sb) + rz1 * cb;
                    rx3 = rx2 * cc + ry2 * (-sc);
                    ry3 = rx2 * sc + ry2 * cc;
                    rz3 = rz2;
                    itemPosList[j].cx = rx3;
                    itemPosList[j].cy = ry3;
                    itemPosList[j].cz = rz3;
                    per = param.depth / (param.depth + rz3);
                    itemPosList[j].x = (param.howElliptical * rx3 * per) - (param.howElliptical * 2);
                    itemPosList[j].y = ry3 * per;
                    itemPosList[j].scale = per;
                    itemPosList[j].alpha = per;

                    itemPosList[j].alpha = (itemPosList[j].alpha - 0.6) * (10 / 6);
                }
                items.each(function(i) {
                    $(this).css('left', itemPosList[i].cx + l - itemPosList[i].width / 2 + 'px');
                    $(this).css('top', itemPosList[i].cy + t - itemPosList[i].height / 2 + 'px');

                    $(this).css('font-size', Math.ceil(param.fontsize * itemPosList[i].scale / 2) + 8 + 'px');

                    $(this).css('filter', "alpha(opacity=" + 100 * itemPosList[i].alpha + ")");
                    $(this).css('opacity', itemPosList[i].alpha);
                    $(this).css("z-index", i);
                });
            }
        };
    })(jQuery);
  </script>
  </body>
  </html>
  <script type="text/javascript">
      $(document).ready(function() {
      $("#div1").windstagball({
              radius:120,
              speed:10
          });
      });
  </script>

您可以修改框中代码后运行查看

标签: 标签云

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇爱情，从来不是天道酬勤
上一篇一小时吃两顿饭

发表评论：

知向前端

js和jquery常用3D标签云代码实例总结

js常用3D标签云1

js常用3D标签云2

jquery常用3D标签云TagCloud..js

jquery常用3D标签云windstagball

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档