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

2016-2-14 Jon

js常用3D标签云1

<br />
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
  <html xmlns="http://www.w3.org/1999/xhtml"><br />
  <head><br />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
  <title>js常用3D标签云1</title><br />
  <style type="text/css"><br />
  body{ font-family:"微软雅黑", Arial, sans-serif;} #main{border:none; background:none;}<br />
  body,ul,li,h1,h2,h3,p,form{margin:0;padding:0;}body{background:#fbfbfb;color:#444;font-size:14px;}<br />
  a{color:#444;text-decoration:none;}a:hover{color:red;}<br />
  /* tagscloud */<br />
  #tagscloud{width:250px;height:260px;position:relative;font-size:12px;color:#333;margin:20px auto 0;text-align:center;}<br />
  #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;}<br />
  #tagscloud a.tagc1{background:#666;color:#fff;}<br />
  #tagscloud a.tagc2{background:#F16E50;color:#fff;}<br />
  #tagscloud a.tagc5{background:#006633;color:#fff;}<br />
  #tagscloud a:hover{color:#fff;background:#0099ff;}<br />
  </style><br />
  </head><br />
  <body><br />
  <div id="tagscloud"><br />
    <a href="javascript:;" class="tagc1">银行存款利率</a><br />
    <a href="javascript:;" class="tagc2">银行利率</a><br />
    <a href="javascript:;" class="tagc5">银行贷款利率</a><br />
    <a href="javascript:;" class="tagc2">银行存款利率<a><br />
    <a href="javascript:;" class="tagc2">银行利率</a><br />
    <a href="javascript:;" class="tagc1">不孕不育</a><br />
    <a href="javascript:;" class="tagc2">银行存款利率</a><br />
    <a href="javascript:;" class="tagc5">银行贷款利率</a><br />
    <a href="javascript:;" class="tagc2">银行利率</a><br />
    <a href="javascript:;" class="tagc2">房贷利率2013</a><br />
    <a href="javascript:;" class="tagc5">银行存款利率表</a><br />
    <a href="javascript:;" class="tagc2">银行贷款利率表</a><br />
    <a href="javascript:;" class="tagc1">银行存款利率</a><br />
    <a href="javascript:;" class="tagc2">银行利率</a><br />
    <a href="javascript:;" class="tagc5">银行贷款利率</a><br />
    <a href="javascript:;" class="tagc2">银行存款利率<a><br />
    <a href="javascript:;" class="tagc2">银行利率</a><br />
    <a href="javascript:;" class="tagc1">不孕不育</a><br />
    <a href="javascript:;" class="tagc2">银行存款利率</a><br />
    <a href="javascript:;" class="tagc5">银行贷款利率</a><br />
    <a href="javascript:;" class="tagc2">银行利率</a><br />
    <a href="javascript:;" class="tagc2">房贷利率2013</a><br />
    <a href="javascript:;" class="tagc5">银行存款利率表</a><br />
    <a href="javascript:;" class="tagc2">银行贷款利率表</a><br />
  </div><br />
  <!-- tags.js --><br />
  <script><br />
    var radius = 90;<br />
    var d = 200;<br />
    var dtr = Math.PI / 180;<br />
    var mcList = [];<br />
    var lasta = 1;<br />
    var lastb = 1;<br />
    var distr = true;<br />
    var tspeed = 11;<br />
    var size = 200;<br />
    var mouseX = 0;<br />
    var mouseY = 10;<br />
    var howElliptical = 1;<br />
    var aA = null;<br />
    var oDiv = null;<br />
    window.onload=function ()<br />
    {<br />
      var i=0;<br />
      var oTag=null;<br />
      oDiv=document.getElementById('tagscloud');<br />
      aA=oDiv.getElementsByTagName('a');<br />
      for(i=0;i<aA.length;i++)<br />
      {<br />
        oTag={};<br />
        aA[i].onmouseover = (function (obj) {<br />
          return function () {<br />
            obj.on = true;<br />
            this.style.zIndex = 9999;<br />
            this.style.color = '#fff';<br />
            this.style.padding = '5px 5px';<br />
            this.style.filter = "alpha(opacity=100)";<br />
            this.style.opacity = 1;<br />
          }<br />
        })(oTag)<br />
        aA[i].onmouseout = (function (obj) {<br />
          return function () {<br />
            obj.on = false;<br />
            this.style.zIndex = obj.zIndex;<br />
            this.style.color = '#fff';<br />
            this.style.padding = '5px';<br />
            this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";<br />
            this.style.opacity = obj.alpha;<br />
            this.style.zIndex = obj.zIndex;<br />
          }<br />
        })(oTag)<br />
        oTag.offsetWidth = aA[i].offsetWidth;<br />
        oTag.offsetHeight = aA[i].offsetHeight;<br />
        mcList.push(oTag);<br />
      }<br />
      sineCosine( 0,0,0 );<br />
      positionAll();<br />
      (function () {<br />
                update();<br />
                setTimeout(arguments.callee, 40);<br />
            })();<br />
    };<br />
    function update()<br />
    {<br />
      var a, b, c = 0;<br />
            a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;<br />
            b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;<br />
            lasta = a;<br />
            lastb = b;<br />
            if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {<br />
                return;<br />
            }<br />
            sineCosine(a, b, c);<br />
            for (var i = 0; i < mcList.length; i++) {<br />
                if (mcList[i].on) {<br />
                    continue;<br />
                }<br />
                var rx1 = mcList[i].cx;<br />
                var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);<br />
                var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;<br />
<br />
                var rx2 = rx1 * cb + rz1 * sb;<br />
                var ry2 = ry1;<br />
                var rz2 = rx1 * (-sb) + rz1 * cb;<br />
<br />
                var rx3 = rx2 * cc + ry2 * (-sc);<br />
                var ry3 = rx2 * sc + ry2 * cc;<br />
                var rz3 = rz2;<br />
<br />
                mcList[i].cx = rx3;<br />
                mcList[i].cy = ry3;<br />
                mcList[i].cz = rz3;<br />
<br />
                per = d / (d + rz3);<br />
<br />
                mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);<br />
                mcList[i].y = ry3 * per;<br />
                mcList[i].scale = per;<br />
                var alpha = per;<br />
                alpha = (alpha - 0.6) * (10 / 6);<br />
                mcList[i].alpha = alpha * alpha * alpha - 0.2;<br />
                mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));<br />
            }<br />
            doPosition();<br />
    }<br />
    function positionAll()<br />
    {<br />
      var phi = 0;<br />
        var theta = 0;<br />
        var max = mcList.length;<br />
        for (var i = 0; i < max; i++) {<br />
            if (distr) {<br />
                phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);<br />
                theta = Math.sqrt(max * Math.PI) * phi;<br />
            } else {<br />
                phi = Math.random() * (Math.PI);<br />
                theta = Math.random() * (2 * Math.PI);<br />
            }<br />
            //坐标变换<br />
            mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);<br />
            mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);<br />
            mcList[i].cz = radius * Math.cos(phi);<br />
<br />
            aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';<br />
            aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';<br />
        }<br />
    }<br />
    function doPosition()<br />
    {<br />
      var l = oDiv.offsetWidth / 2;<br />
            var t = oDiv.offsetHeight / 2;<br />
            for (var i = 0; i < mcList.length; i++) {<br />
                if (mcList[i].on) {<br />
                    continue;<br />
                }<br />
                var aAs = aA[i].style;<br />
                if (mcList[i].alpha > 0.1) {<br />
                    if (aAs.display != '')<br />
                        aAs.display = '';<br />
                } else {<br />
                    if (aAs.display != 'none')<br />
                        aAs.display = 'none';<br />
                    continue;<br />
                }<br />
                aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';<br />
                aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';<br />
                //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';<br />
                //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";<br />
                aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";<br />
                aAs.zIndex = mcList[i].zIndex;<br />
                aAs.opacity = mcList[i].alpha;<br />
            }<br />
    }<br />
    function sineCosine( a, b, c)<br />
    {<br />
      sa = Math.sin(a * dtr);<br />
        ca = Math.cos(a * dtr);<br />
        sb = Math.sin(b * dtr);<br />
        cb = Math.cos(b * dtr);<br />
      sc = Math.sin(c * dtr);<br />
      cc = Math.cos(c * dtr);<br />
    }<br />
  </script><br />
  </body><br />
  </html><br />

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

js常用3D标签云2

<br />
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
  <html xmlns="http://www.w3.org/1999/xhtml"><br />
  <head><br />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
  <title>js标签云</title><br />
  <style type="text/css"><br />
    #tagbox{position:relative;margin:10px auto 0px;height:250px;}<br />
    #tagbox a{position:absolute;padding:3px 6px;color:#87b126;top:0px;text-decoration:none;left:0px}<br />
    #tagbox a:hover{border:#fff 1px solid;background:#000;color:#fff;}<br />
    #tagbox .color1{color:#393c3c}<br />
    #tagbox .color2{color:#e05656}<br />
    #tagbox .color3{color:#87b126}<br />
    #tagbox .color4{color:#d86135}<br />
    #tagbox .color5{color:#17a6c2}<br />
    #tagbox .color6{color:#804a99}<br />
  </style><br />
  </head><br />
  <body><br />
  <script type="text/javascript" src="tags.js"></script><br />
  <div id="tagbox"><br />
    <a href="#">美女</a><br />
    <a class="color1" href="#">写真</a><br />
    <a class="color5" href="#">贴图</a><br />
    <a class="color3" href="#">灌水</a><br />
    <a class="color1" href="#">大片</a><br />
    <a href="#">小说</a><br />
    <a class="color2" href="#">欧美</a><br />
    <a class="color4" href="#">日韩</a><br />
    <a href="#">诱人</a><br />
    <a class="color5" href="#">搞笑</a><br />
    <a href="#">性感</a><br />
    <a class="color1" href="#">壁纸</a><br />
    <a class="color5" href="#">泳装</a><br />
    <a class="color2" href="#">言情</a><br />
    <a class="color3" href="#">浪漫</a><br />
    <a class="color4" href="#">耽美</a><br />
    <a class="color1" href="#">爆笑</a><br />
    <a class="color2" href="#">美眉</a><br />
    <a class="color4" href="#">同人</a><br />
    <a class="color5" href="#">武侠</a><br />
    <a class="color4" href="#">魔幻</a><br />
    <a href="#">教案</a><br />
    <a href="#">论文</a><br />
    <a class="color3" href="#">妩媚</a><br />
    <a href="#">黑丝</a><br />
    <a href="#">诱惑</a><br />
    <a class="color1" href="#">科幻</a><br />
    <a class="color2" href="#">恐怖</a><br />
    <a class="color2" href="#">性感</a><br />
    <a class="color3" href="#">TXT下载</a><br />
    <a href="#">音乐</a><br />
    <a class="color4" href="#">游戏</a><br />
    <a class="color5" href="#">CG资源</a><br />
    <a href="#">YunFile</a><br />
    <a href="#">课件</a><br />
    <a href="#">幽默</a><br />
    <a ref="#">波霸</a><br />
    <a href="#">私人照</a><br />
    <a href="#">名校</a><br />
    <a class="color2" href="#">赚钱</a><br />
    <a class="color3" href="#">千脑</a><br />
    <a class="color4" href="#">清純</a><br />
    <a class="color5" href="#">云电脑</a><br />
  </div><br />
  <!-- tags.js --><br />
  <script><br />
    var radius = 100,<br />
        dtr = Math.PI/180,<br />
        d=200,<br />
        mcList = [],<br />
        active = false,<br />
        lasta = 1,<br />
        lastb = 1,<br />
        distr = true,<br />
        tspeed=5,<br />
        size=250,<br />
        mouseX=0,<br />
        mouseY=0,<br />
        howElliptical=1,<br />
        aA=null,<br />
        oDiv=null;<br />
    window.onload=function ()<br />
    {<br />
      var i=0;<br />
      var oTag=null;<br />
      oDiv=document.getElementById('tagbox');<br />
      aA=oDiv.getElementsByTagName('a');<br />
      for(i=0;i<aA.length;i++)<br />
      {<br />
        oTag={};<br />
        oTag.offsetWidth=aA[i].offsetWidth;<br />
        oTag.offsetHeight=aA[i].offsetHeight;<br />
        mcList.push(oTag);<br />
      }<br />
      sineCosine( 0,0,0 );<br />
      positionAll();<br />
      oDiv.onmouseover=function ()<br />
      {<br />
        active=true;<br />
      };<br />
      oDiv.onmouseout=function ()<br />
      {<br />
        active=false;<br />
      };<br />
      oDiv.onmousemove=function (ev)<br />
      {<br />
        var oEvent=window.event || ev;<br />
        mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);<br />
        mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);<br />
        mouseX/=5;<br />
        mouseY/=5;<br />
      };<br />
      setInterval(update, 30);<br />
    };<br />
    function update()<br />
    {<br />
      var a;<br />
      var b;<br />
      if(active)<br />
      {<br />
        a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;<br />
        b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;<br />
      }<br />
      else<br />
      {<br />
        a = lasta * 0.98;<br />
        b = lastb * 0.98;<br />
      }<br />
      lasta=a;<br />
      lastb=b;<br />
      if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)<br />
      {<br />
        return;<br />
      }<br />
      var c=0;<br />
      sineCosine(a,b,c);<br />
      for(var j=0;j<mcList.length;j++)<br />
      {<br />
        var rx1=mcList[j].cx;<br />
        var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);<br />
        var rz1=mcList[j].cy*sa+mcList[j].cz*ca;<br />
        var rx2=rx1*cb+rz1*sb;<br />
        var ry2=ry1;<br />
        var rz2=rx1*(-sb)+rz1*cb;<br />
        var rx3=rx2*cc+ry2*(-sc);<br />
        var ry3=rx2*sc+ry2*cc;<br />
        var rz3=rz2;<br />
        mcList[j].cx=rx3;<br />
        mcList[j].cy=ry3;<br />
        mcList[j].cz=rz3;<br />
        per=d/(d+rz3);<br />
        mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);<br />
        mcList[j].y=ry3*per;<br />
        mcList[j].scale=per;<br />
        mcList[j].alpha=per;<br />
        mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);<br />
      }<br />
      doPosition();<br />
      depthSort();<br />
    }<br />
    function depthSort()<br />
    {<br />
      var i=0;<br />
      var aTmp=[];<br />
      for(i=0;i<aA.length;i++)<br />
      {<br />
        aTmp.push(aA[i]);<br />
      }<br />
      aTmp.sort<br />
      (<br />
        function (vItem1, vItem2)<br />
        {<br />
          if(vItem1.cz>vItem2.cz)<br />
          {<br />
            return -1;<br />
          }<br />
          else if(vItem1.cz<vItem2.cz)<br />
          {<br />
            return 1;<br />
          }<br />
          else<br />
          {<br />
            return 0;<br />
          }<br />
        }<br />
      );<br />
      for(i=0;i<aTmp.length;i++)<br />
      {<br />
        aTmp[i].style.zIndex=i;<br />
      }<br />
    }<br />
    function positionAll()<br />
    {<br />
      var phi=0;<br />
      var theta=0;<br />
      var max=mcList.length;<br />
      var i=0;<br />
      var aTmp=[];<br />
      var oFragment=document.createDocumentFragment();<br />
      //随机排序<br />
      for(i=0;i<aA.length;i++)<br />
      {<br />
        aTmp.push(aA[i]);<br />
      }<br />
      aTmp.sort<br />
      (<br />
        function ()<br />
        {<br />
          return Math.random()<0.5?1:-1;<br />
        }<br />
      );<br />
      for(i=0;i<aTmp.length;i++)<br />
      {<br />
        oFragment.appendChild(aTmp[i]);<br />
      }<br />
      oDiv.appendChild(oFragment);<br />
      for( var i=1; i<max+1; i++){<br />
        if( distr )<br />
        {<br />
          phi = Math.acos(-1+(2*i-1)/max);<br />
          theta = Math.sqrt(max*Math.PI)*phi;<br />
        }<br />
        else<br />
        {<br />
          phi = Math.random()*(Math.PI);<br />
          theta = Math.random()*(2*Math.PI);<br />
        }<br />
        //坐标变换<br />
        mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);<br />
        mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);<br />
        mcList[i-1].cz = radius * Math.cos(phi);<br />
        aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';<br />
        aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';<br />
      }<br />
    }<br />
    function doPosition()<br />
    {<br />
      var l=oDiv.offsetWidth/2;<br />
      var t=oDiv.offsetHeight/2;<br />
      for(var i=0;i<mcList.length;i++)<br />
      {<br />
        aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';<br />
        aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';<br />
        aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';<br />
        aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";<br />
        aA[i].style.opacity=mcList[i].alpha;<br />
      }<br />
    }<br />
    function sineCosine( a, b, c)<br />
    {<br />
      sa = Math.sin(a * dtr);<br />
      ca = Math.cos(a * dtr);<br />
      sb = Math.sin(b * dtr);<br />
      cb = Math.cos(b * dtr);<br />
      sc = Math.sin(c * dtr);<br />
      cc = Math.cos(c * dtr);<br />
    }<br />
  </script><br />
  </body><br />
  </html><br />

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

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

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

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

jquery常用3D标签云windstagball

<br />
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
  <html xmlns="http://www.w3.org/1999/xhtml"><br />
  <head><br />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
  <title>标签云 - 标签球 - windstagball v1.0</title><br />
  <style type="text/css"><br />
  body {background: #FFF }<br />
  #div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; }<br />
  #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px 6px; }<br />
  #div1 a:hover {border: 1px solid #eee; background: #FFF; }<br />
  #div1 .blue {color:blue;}<br />
  #div1 .red {color:red;}<br />
  #div1 .green {color:green;}<br />
  p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }<br />
  p a { font-size: 14px; color: #ba0c0c; }<br />
  p a:hover { color: red; }<br />
  </style><br />
  <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br />
  </head><br />
  <body><br />
  <div id="div1"><br />
    <a href="#">标签云</a><br />
    <a href="#" class="red">PHP</a><br />
    <a href="#">瀑布流</a><br />
    <a href="#">Tab</a><br />
    <a href="#" class="blue">流体布局</a><br />
    <a href="#">SEO</a><br />
    <a href="#" class="red">彩蛋</a><br />
    <a href="#" class="green">JavaScript</a><br />
    <a href="#">miaov</a><br />
    <a href="#" class="red">CSS</a><br />
    <a href="#">asp.net</a><br />
    <a href="#" class="blue">蓝色经典</a><br />
    <a href="#">OOP</a><br />
    <a href="#" class="red">Android</a><br />
    <a href="#" class="blue">妙味茶馆</a><br />
    <a href="#">dialog</a><br />
    <a href="#" class="blue">淘客</a><br />
    <a href="#">Pin</a><br />
    <a href="#">微博</a><br />
    <a href="#" class="green">IPhone</a><br />
  </div><br />
  <!-- jquery.windstagball --><br />
  <script><br />
    /**<br />
    * JQuery.windstagball.js<br />
    * @description : 源码和创作思路来源于miaov,作者只是改良为Jquery插件，方便喜欢用jquery插件的人使用<br />
    * @author : miaov winds<br />
    * @url : http://www.miaov.com/ http://www.lijian.net/<br />
    * @qq : 342377<br />
    * @version :v1.0<br />
    * @create :2012.05.04<br />
    */<br />
    ; (function($) {<br />
        $.fn.windstagball = function(options) {<br />
<br />
            var defaults = {<br />
                radius: 120,<br />
                size: 300,<br />
                speed: 10,<br />
                depth: 300,<br />
                howElliptical: 1,<br />
                fontsize: 12<br />
            },<br />
            param = $.extend({}, defaults, options || {}),<br />
            selector = $(this).selector,<br />
            warp = $(this),<br />
            items = $(selector + ' a'),<br />
            dtr = Math.PI / 180,<br />
            itemPosList = [],<br />
            active = false,<br />
            lasta = 1,<br />
            lastb = 1,<br />
            distr = true,<br />
            mouseX = 0,<br />
            mouseY = 0,<br />
            sb, sa, sc, ca, cb, cc, oItem, oEvent, si;<br />
            items.each(function() {<br />
                oItem = {};<br />
                oItem.width = $(this).width();<br />
                oItem.height = $(this).height();<br />
                itemPosList.push(oItem);<br />
            });<br />
<br />
<br />
            init();<br />
<br />
            warp.mouseover(function() {<br />
                active = true;<br />
            });<br />
<br />
            warp.mouseout(function() {<br />
                active = false;<br />
            });<br />
<br />
            warp.mousemove(function(ev) {<br />
                oEvent = window.event || ev;<br />
                mouseX = oEvent.clientX - (warp.offset().left + warp.width() / 2);<br />
                mouseY = oEvent.clientY - (warp.offset().top + warp.height() / 2);<br />
                mouseX /= 5;<br />
                mouseY /= 5;<br />
            });<br />
<br />
            setInterval(setPosition, 30);<br />
<br />
            //初始化位置<br />
            function init() {<br />
                var phi = 0,<br />
                theta = 0,<br />
                max = itemPosList.length;<br />
                sineCosine(0, 0, 0);<br />
                //初始随机排序<br />
                items.sort(function() {<br />
                    return Math.random() < 0.5 ? 1 : -1;<br />
                });<br />
<br />
                items.each(function(i) {<br />
                    if (distr) {<br />
                        phi = Math.acos(-1 + (2 * i) / max);<br />
                        theta = Math.sqrt(max * Math.PI) * phi;<br />
                    }<br />
                    else {<br />
                        phi = Math.random() * (Math.PI);<br />
                        theta = Math.random() * (2 * Math.PI);<br />
                    }<br />
                    itemPosList[i].cx = param.radius * Math.cos(theta) * Math.sin(phi);<br />
                    itemPosList[i].cy = param.radius * Math.sin(theta) * Math.sin(phi);<br />
                    itemPosList[i].cz = param.radius * Math.cos(phi);<br />
                    $(this).css('left', itemPosList[i].cx + warp.width() / 2 - itemPosList[i].width / 2 + 'px');<br />
                    $(this).css('top', itemPosList[i].cy + warp.height() / 2 - itemPosList[i].height / 2 + 'px');<br />
                });<br />
            };<br />
<br />
            function sineCosine(a, b, c) {<br />
                sa = Math.sin(a * dtr);<br />
                ca = Math.cos(a * dtr);<br />
                sb = Math.sin(b * dtr);<br />
                cb = Math.cos(b * dtr);<br />
                sc = Math.sin(c * dtr);<br />
                cc = Math.cos(c * dtr);<br />
            };<br />
<br />
            function setPosition() {<br />
                var a, b, c = 0, j, rx1, ry1, rz1, rx2, ry2, rz2, rx3, ry3, rz3, l = warp.width() / 2, t = warp.height() / 2;<br />
<br />
                if (active) {<br />
                    a = (-Math.min(Math.max(-mouseY, -param.size), param.size) / param.radius) * param.speed;<br />
                    b = (Math.min(Math.max(-mouseX, -param.size), param.size) / param.radius) * param.speed;<br />
                }<br />
                else {<br />
                    a = lasta * 0.98;<br />
                    b = lastb * 0.98;<br />
                }<br />
                lasta = a;<br />
                lastb = b;<br />
                if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {<br />
                    return;<br />
                }<br />
                sineCosine(a, b, c);<br />
                for (j = 0; j < itemPosList.length; j++) {<br />
                    rx1 = itemPosList[j].cx;<br />
                    ry1 = itemPosList[j].cy * ca + itemPosList[j].cz * (-sa);<br />
                    rz1 = itemPosList[j].cy * sa + itemPosList[j].cz * ca;<br />
                    rx2 = rx1 * cb + rz1 * sb;<br />
                    ry2 = ry1;<br />
                    rz2 = rx1 * (-sb) + rz1 * cb;<br />
                    rx3 = rx2 * cc + ry2 * (-sc);<br />
                    ry3 = rx2 * sc + ry2 * cc;<br />
                    rz3 = rz2;<br />
                    itemPosList[j].cx = rx3;<br />
                    itemPosList[j].cy = ry3;<br />
                    itemPosList[j].cz = rz3;<br />
                    per = param.depth / (param.depth + rz3);<br />
                    itemPosList[j].x = (param.howElliptical * rx3 * per) - (param.howElliptical * 2);<br />
                    itemPosList[j].y = ry3 * per;<br />
                    itemPosList[j].scale = per;<br />
                    itemPosList[j].alpha = per;<br />
<br />
                    itemPosList[j].alpha = (itemPosList[j].alpha - 0.6) * (10 / 6);<br />
                }<br />
                items.each(function(i) {<br />
                    $(this).css('left', itemPosList[i].cx + l - itemPosList[i].width / 2 + 'px');<br />
                    $(this).css('top', itemPosList[i].cy + t - itemPosList[i].height / 2 + 'px');<br />
<br />
                    $(this).css('font-size', Math.ceil(param.fontsize * itemPosList[i].scale / 2) + 8 + 'px');<br />
<br />
                    $(this).css('filter', "alpha(opacity=" + 100 * itemPosList[i].alpha + ")");<br />
                    $(this).css('opacity', itemPosList[i].alpha);<br />
                    $(this).css("z-index", i);<br />
                });<br />
            }<br />
        };<br />
    })(jQuery);<br />
  </script><br />
  </body><br />
  </html><br />
  <script type="text/javascript"><br />
      $(document).ready(function() {<br />
      $("#div1").windstagball({<br />
              radius:120,<br />
              speed:10<br />
          });<br />
      });<br />
  </script><br />

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

评论：

DenverSpatt

2026-03-11 20:52 回复

I started writing down one thing at the end of every day — what I actually managed to do. Not a to-do list, not plans. Just one small win. It's surprising how quickly it shifts your perspective.

SantosAntef

2025-12-23 21:56 回复

Процесс банкротства начинается с подачи заявления https://best-bankrotstvo-kaluga.ru/proczedura-bankrotstva-dolzhnika/ процедура банкротства также защищает должника от преследования со стороны кредиторов.

发表评论：