zoukankan      html  css  js  c++  java
  • 为博客园添加标签云动画

    canrun

     优化版(分隔线以上直接实现3D标签云效果展示):

      一、在博客园管理-设置-页首Html代码中加入:

      <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/swfobject.js"></script>

          <script type="text/javascript" src="http://demo.zjmainstay.cn/cnblogs/getTags.php?url=http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F"></script>
          <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/Zjmainstay_cnblogs_tags.js"></script>

      注1:请修改第一个script的src的url=部分,修改成你自己的博客园域名,为http://www.cnblogs.com/Zjmainstay/tag/的urlencode结果。第二个script不变。

      注2:http://demo.zjmainstay.cn/cnblogs/getTags.php?hl可获取getTags.php源码,也是下面的get_cnblogs_tags.php的源码。

      二、设置-页脚Html代码中加入:

      <div id="ZjmainstayCnblogsSWFTags"></div>

      三、设置-通过CSS定制页面风格 加入:

      #ZjmainstayCnblogsSWFTags{
          overflow: visible;
          position: absolute;
          right: 10px;
          top: 735px;
          160px;
          z-index: 10000;
      }

        ********************** 分隔 ******************************************* 分隔 *******************************************

        注:分隔线以下为功能实现讲解,优化版为后期补充,方便园友快速使用。

        昨天晚上在一个其他站点的博客上看到了一个标签云动画,挺喜欢的,动手把它移植到了博客园上了,嘿嘿~

        定制标签云主要涉及2个外部引用的js文件:swfobject.js 和 Zjmainstay_cnblogs_tags.js,和一个动画文件:tagcloud.swf,还有一个后台解析博客园标签生成标签云动画参数var tag的get_cnblogs_tags.php文件。swfobject.js 、tagcloud.swf是给Zjmainstay_cnblogs_tags.js调用来创建标签云动画用的。下面是Zjmainstay_cnblogs_tags.js的源码:

        注:tags内容太长,这里提取出来:  

    var tags
    var tags = "%3Ctags%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fphp%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Ephp%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FjQuery%2520ajax%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EjQuery+ajax%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FgetPage%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EgetPage%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Furl%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eurl%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FjQuery%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EjQuery%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FJS%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EJS%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fimage%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eimage%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fvisio%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Evisio%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FCSS%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3ECSS%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FdivideQuery%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EdivideQuery%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FIP%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EIP%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FVNC%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EVNC%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FHTML%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EHTML%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Ffile_get_contents%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Efile_get_contents%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FJavascript%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EJavascript%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E7%2599%25BE%25E5%25BA%25A6%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E7%99%BE%E5%BA%A6%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FFireFox%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EFireFox%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FDelete%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EDelete%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fjoomla%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Ejoomla%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E8%25B6%2585%25E6%2597%25B6%25E6%258E%25A7%25E5%2588%25B6%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E8%B6%85%E6%97%B6%E6%8E%A7%E5%88%B6%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FDIV%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EDIV%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FAdd%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EAdd%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FjQery%2520Ajax%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EjQery+Ajax%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E5%259C%25B0%25E5%259D%2580%25E6%25A0%258F%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E5%9C%B0%E5%9D%80%E6%A0%8F%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FMySQL%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EMySQL%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FAjax%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EAjax%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Freadonly%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Ereadonly%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E5%258A%25A8%25E6%2580%2581%25E5%2588%259B%25E5%25BB%25BA%25E8%25A1%25A8%25E6%25A0%25BC%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E5%8A%A8%E6%80%81%E5%88%9B%E5%BB%BA%E8%A1%A8%E6%A0%BC%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FJS%2520format%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EJS+format%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fappend%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eappend%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fsearch%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Esearch%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E5%2588%2586%25E4%25BA%25AB%25E6%258C%2589%25E9%2592%25AE%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E6%2590%259C%25E7%25B4%25A2%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E6%90%9C%E7%B4%A2%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Farray%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Earray%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fselect%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eselect%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E7%2581%25AB%25E7%258B%2590%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E7%81%AB%E7%8B%90%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E7%25BA%25BF%25E7%25B2%2597%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E7%BA%BF%E7%B2%97%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FCircle%2520DIV%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3ECircle+DIV%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FselectedIndex%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EselectedIndex%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E8%258E%25B7%25E5%258F%2596%25E9%25A1%25B5%25E9%259D%25A2%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E8%8E%B7%E5%8F%96%E9%A1%B5%E9%9D%A2%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fli%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eli%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Ffiregestures%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Efiregestures%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fselect%25E5%258F%25AA%25E8%25AF%25BB%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eselect%E5%8F%AA%E8%AF%BB%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E4%25B8%2589%25E8%25A7%2592%25E5%25BD%25A2div%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E4%B8%89%E8%A7%92%E5%BD%A2div%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Flink%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Elink%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2FFloat%2520DIV%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3EFloat+DIV%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fshare%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eshare%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E9%25BC%25A0%25E6%25A0%2587%25E6%2589%258B%25E5%258A%25BF%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E9%BC%A0%E6%A0%87%E6%89%8B%E5%8A%BF%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fmouse%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Emouse%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fgesture%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Egesture%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Ftxt%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Etxt%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F%25E6%2595%25B0%25E6%258D%25AE%25E5%25BA%2593%25E9%2599%25A4%25E8%25BF%2590%25E7%25AE%2597%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3E%E6%95%B0%E6%8D%AE%E5%BA%93%E9%99%A4%E8%BF%90%E7%AE%97%3C%2Fa%3E%3Ca+href%3D%27http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2Fonchange%2F%27+class%3D%27tag-link-118%27+title%3D%271+%E4%B8%AA%E8%AF%9D%E9%A2%98%27+style%3D%27font-size%3A+8pt%3B%27%3Eonchange%3C%2Fa%3E%3C%2Ftags%3E";
    $(document).ready(function(){
        var tags = "";  //上面的tags
        //decodeURIComponent(tags);
        var widget_so2406005 = new SWFObject("https://files.cnblogs.com/Zjmainstay/tagcloud.swf", "tagcloudflash", "200", "200", "9", "#282828");
        widget_so2406005.addParam("allowScriptAccess", "always");
        widget_so2406005.addVariable("tcolor", "0xff0000");
        widget_so2406005.addVariable("tcolor2", "0x333333");
        widget_so2406005.addVariable("hicolor", "0x000000");
        widget_so2406005.addVariable("tspeed", "100");
        widget_so2406005.addVariable("distr", "true");
        widget_so2406005.addVariable("mode", "tags");
        widget_so2406005.addVariable("tagcloud", tags);
        widget_so2406005.write("ZjmainstayCnblogsSWFTags");
        // $.ajax({
            // url:'http://demo.zjmainstay.cn/cnblogs/getTags.php?url='+encodeURIComponent('http://www.cnblogs.com/Zjmainstay/tag/'),
            // success:function(data){
                // if(data != 'false') tags = data;
                // var widget_so2406005 = new SWFObject("http://www.yiiyaa.net/wp-content/plugins/wp-cumulus/tagcloud.swf?r=9147033", "tagcloudflash", "200", "200", "9", "#282828");
                // widget_so2406005.addParam("allowScriptAccess", "always");
                // widget_so2406005.addVariable("tcolor", "0xff0000");
                // widget_so2406005.addVariable("tcolor2", "0x333333");
                // widget_so2406005.addVariable("hicolor", "0x000000");
                // widget_so2406005.addVariable("tspeed", "100");
                // widget_so2406005.addVariable("distr", "true");
                // widget_so2406005.addVariable("mode", "tags");
                // widget_so2406005.addVariable("tagcloud", tags);
                // widget_so2406005.write("ZjmainstayCnblogsSWFTags");
            // },
            // error:function(){
                // var widget_so2406005 = new SWFObject("http://www.yiiyaa.net/wp-content/plugins/wp-cumulus/tagcloud.swf?r=9147033", "tagcloudflash", "200", "200", "9", "#282828");
                // widget_so2406005.addParam("allowScriptAccess", "always");
                // widget_so2406005.addVariable("tcolor", "0xff0000");
                // widget_so2406005.addVariable("tcolor2", "0x333333");
                // widget_so2406005.addVariable("hicolor", "0x000000");
                // widget_so2406005.addVariable("tspeed", "100");
                // widget_so2406005.addVariable("distr", "true");
                // widget_so2406005.addVariable("mode", "tags");
                // widget_so2406005.addVariable("tagcloud", tags);
                // widget_so2406005.write("ZjmainstayCnblogsSWFTags");
            // }
        // });
    });

    因为我调用的ajax响应服务器是一个免费php空间的,运行速度好慢,常常解析超时,因此被我屏蔽了。我采用了自己为var tag赋值的方式,而它的值是通过本地使用get_cnblogs_tags.php(ajax请求文件)获取博客园标签页解析并生成的,用户引用此部分ajax时,可自行修改$.ajax的url即可。get_cnblogs_tags.php源码如下:

    View Code
    <?php
    header("Content-type: text/html; charset=utf-8"); 
    $url = $_GET['url'];
    
    if(empty($url)) $url = 'http://www.cnblogs.com/Zjmainstay/tag/';
    
    $divData = getWebDiv('id="taglist"',$url);
    
    $pattern = '/<a(?:.*?)href="((?:http(?:s?):\/\/)?(?:[^\"\/]+)(?:[^\"]*))"(?:[^>]*?)>([^<]*?)<\/a>/i';
    preg_match_all($pattern, $divData, $links);
    $urls = $links[1];
    $tags = $links[2];
    
    $output = '';
    foreach($urls as $i => $url){
        $output .= urlencode("<a href='{$url}' class='tag-link-118' title='1 个话题' style='font-size: 8pt;'>{$tags[$i]}</a>");
    }
    
    if(!empty($output)) echo urlencode('<tags>').$output.urlencode('</tags>');
    else echo 'false';
    exit(0);
    
    function getWebDiv($div_id,$url=false,$data=false){
        if($url !== false){
            $data = file_get_contents( $url );
        }
        $charset_pos = stripos($data,'charset');
        if($charset_pos) {
            if(stripos($data,'utf-8',$charset_pos)) {
                $data = iconv('utf-8','utf-8',$data);
            }else if(stripos($data,'gb2312',$charset_pos)) {
                $data = iconv('gb2312','utf-8',$data);
            }else if(stripos($data,'gbk',$charset_pos)) {
                $data = iconv('gbk','utf-8',$data);
            }
        }
        
        preg_match_all('/<div/i',$data,$pre_matches,PREG_OFFSET_CAPTURE);    //获取所有div前缀
        preg_match_all('/<\/div/i',$data,$suf_matches,PREG_OFFSET_CAPTURE); //获取所有div后缀
        $hit = strpos($data,$div_id);
        if($hit == -1) return false;    //未命中
        $divs = array();    //合并所有div
        foreach($pre_matches[0] as $index=>$pre_div){
            $divs[(int)$pre_div[1]] = 'p';
            $divs[(int)$suf_matches[0][$index][1]] = 's';    
        }
        
        //对div进行排序
        $sort = array_keys($divs);
        asort($sort);
        
        $count = count($pre_matches[0]);
        foreach($pre_matches[0] as $index=>$pre_div){
            //<div $hit <div+1    时div被命中
            if(($pre_matches[0][$index][1] < $hit) && ($hit < $pre_matches[0][$index+1][1])){
                $deeper = 0;
                //弹出被命中div前的div
                while(array_shift($sort) != $pre_matches[0][$index][1] && ($count--)) continue;
                //对剩余div进行匹配,若下一个为前缀,则向下一层,$deeper加1,
                //否则后退一层,$deeper减1,$deeper为0则命中匹配,计算div长度
                foreach($sort as $key){
                    if($divs[$key] == 'p') $deeper++;
                    else if($deeper == 0) {
                        $length = $key-$pre_matches[0][$index][1];
                        break;
                    }else {
                        $deeper--;
                    }
                }
                $hitDivString = substr($data,$pre_matches[0][$index][1],$length).'</div>';
                break;
            }
        }
        return $hitDivString;
    }

        Zjmainstay_cnblogs_tags.js中调用的SWFObject是从swfobject.js来的,而其参数SWFObject("https://files.cnblogs.com/Zjmainstay/tagcloud.swf", "tagcloudflash", "200", "200", "9", "#282828");中的tagcloud.swf,便是对tagcloud.swf文件的调用。

        至此,源码部分已经介绍完了。接下来是博客园对它的引用。

        博客园将其引用进来,主要是在博客园管理-设置-页首Html代码中加入:

    <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/swfobject.js"></script>
    <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/Zjmainstay_cnblogs_tags.js"></script>

    并在设置-页脚Html代码中加入:

    <div id="ZjmainstayCnblogsSWFTags"></div>

    即可。这里的id="ZjmainstayCnblogsSWFTags" 对应Zjmainstay_cnblogs_tags.js中的write("ZjmainstayCnblogsSWFTags")。此时的<div id="ZjmainstayCnblogsSWFTags"></div>会显示在页脚,

    为了让它显示在“我的标签”下面,在 设置-通过CSS定制页面风格 加入:

    #ZjmainstayCnblogsSWFTags{
        position: absolute; 
        left: 762px; 
        top: 1186px;
        z-index:10000;
    }

    将其绝对定位至我的标签下面即可。

    (完)

    ********************** 分隔 ******************

    这里会发现一个问题:拖动页面右侧导航条的时候会发现动画浮动,好像卡机的感觉,求解决。

    ********************** 补充 ******************

    独立标签云用例,请在下面运行此段代码后面填入“6”后点击运行,查看运行效果

    View Code
    <html>
        <head>
            <title>Zjmainstay 的标签</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta http-equiv="Content-Language" content="zh-CN" />
            <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
            <!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/-->
            <script src="https://files.cnblogs.com/Zjmainstay/swfobject.js" type="text/javascript"></script>
            <script src="http://demo.zjmainstay.cn/cnblogs/getTags.php?url=http%3A%2F%2Fwww.cnblogs.com%2FZjmainstay%2Ftag%2F" type="text/javascript"></script>
            <script src="https://files.cnblogs.com/Zjmainstay/Zjmainstay_cnblogs_tags.js" type="text/javascript"></script>
        </head>
    
        <body>
            <div id="wp-cumulus" class="side_box">
                <h3>
                    Zjmainstay 的标签
                </h3>
                <div id="ZjmainstayCnblogsSWFTags"></div>
            </div>
        </body>
    </html>

     

  • 相关阅读:
    service structure flowchart with full stack functionality in a brife map
    service structure flowchart [mobile to server via HTTP RESTful API and TCP/IP in a map]
    service structure flowchart [mobile to server via TCP/IP protocol]
    service structure flowchart [mobile to server via HTTP RESTful API]
    Python -- machine learning, neural network -- PyBrain 机器学习 神经网络
    Deploying OpenFire for IM (instant message) service (TCP/IP service) with database MySQL , client Spark on linux部署OpenFire IM 消息中间件服务
    做自己想做的事,成为想成为的人(转)
    PCB工艺要求
    看了三遍,沉默了五天
    850和940红外发射管的区别
  • 原文地址:https://www.cnblogs.com/Zjmainstay/p/cnblogs_swftags.html
Copyright © 2011-2022 走看看