`

封装 wp-cumulus 中的3D标签云,使之用在普通的网页上(php)。

阅读更多

         看到3D标签云很久了,一直很羡慕,不知道人家是怎么弄的,今天终于了解了一下,就是js+swf实现的。具体代码是大牛写的,我们会用行了。

         扒开代码,看了一天怎么用,终于到晚上得时候让我弄出来了。为了方便,我把它封装成了函数。记录一下吧。

 

          要有这两个文件:tagcloud.swf , swfobject.js

          然后便是自己对这些东西的调用了。不多说了,直接上代码吧。

<!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>tag cloud fengzhuang</title>
</head>
<body>


<?php
        //$abnormal: when the flash and js can not support ,we can also use the links to access
        //$abnormal format: '<a href="http://www.abc.com">abc</a>';
        // $mytags: use to put in the sphere
        // $mytags format:'<a href='http://www.baidu.com' style='font-size: 24.12pt;'>abc24</a> '
        function tag_cloud($abnormal, $mytags)
        {
                $soname = 'so_' . rand(0,999999);
                $moviename  = 'mo_' . rand(0, 999999) ;

                $mytags = urlencode('<tags>') . urlencode($mytags) . urlencode('</tags>');
                $flashtag = '';
                $flashtag .= '<div id="wp-cumulus" class="block">';
	
	//remember to change the src
                $flashtag .= '<script type="text/javascript" src="http://localhost/test/js/swfobject.js"></script>';

                $flashtag .= '<div id = "tagcannotdis">';
                $flashtag .= $abnarmal;
                $flashtag .= '</div>';

                $flashtag .= '<script type="text/javascript">';
               // remember to change the url
                $flashtag .= 'var ' . $soname .' = new SWFObject("http://localhost/test/js/tagcloud.swf?r=' . $moviename . '", "tagcloudflash", "800", "800", "9", "#ffffff");';
               $flashtag .= $soname . '.addParam("wmode", "transparent");';
                $flashtag .= $soname . '.addParam("allowScriptAccess", "always");';
                $flashtag .= $soname . '.addVariable("tcolor", "0xb06002");';
                $flashtag .= $soname . '.addVariable("tcolor2", "0x000000");';
                $flashtag .= $soname . '.addVariable("hicolor", "0x814600");';
                $flashtag .= $soname . '.addVariable("tspeed", "100");';
                $flashtag .= $soname . '.addVariable("distr", "true");';

                // if you want to add the categories , modify here
                $flashtag .= $soname . '.addVariable("mode", "both");';

                $flashtag .= $soname . '.addVariable("tagcloud", "' . $mytags . '");';

                // if you want to add the categories , modify here
                // 6 means the frequency or articles of this categorie
                $flashtag .= $soname . '.addVariable("categories", "' . urlencode('     <a href="http://www.baidu.com">Baidu</a>(6)<br />') . '");';

                $flashtag .= $soname . '.write("tagcannotdis");</script>';


                $flashtag .= '</div>';

                return $flashtag;
        }
?>
        <?php
                // a demo how to use the function tag_cloud();
                echo '<h1>标签云</h1><br />';
                $a = "<a href='http://www.baiduc.com'>baidu</a>";
                $c = "";
                //<a href='http://www.baidu.com' style='font-size: 24.12pt;'>abc24</a>
                for ( $i = 8 ; $i <= 70; $i++)
               {
                        $c .= "<a href='http://www.baidu.com' style='font-size: " . $i . ".12pt;'>tag" . $i . "</a>";
                }
                echo tag_cloud($a, $c);
        ?>
</body>
</html>


 

 将代码保存为php文件,然后借助前面提到的两个文件,就可以看到3D效果的云标签了。

 效果图:

3D云标签效果图

 附件中有完整代码。

注意:tagcloud 变量里的格式是urlencode('<tags><a href='http://www.baidu.com' style='font-size: 24.12pt;'>abc24</a>tags>')

        而categories里面的格式是urlencode('        <a href="http://www.baidu.com" title="P2P">ZZG</a> (1)<br />');

        单引号里德空格是一个tab健,后面的"(1)"表示的是此词条出现的频率,必须按此格式来才可以。

 

 

 

 

 

 

  • 大小: 156.6 KB
分享到:
评论
2 楼 zzgthk 2011-07-16  
错误具体一些。我是测试完才发出来的。
1 楼 xbiji 2011-07-03  
附件里的源码打开后显示错误?

相关推荐

    wp-cumulus_3D云标签

    使用wp-cumulus 3D云标签可以提升用户在网站的浏览体验,使他们更愿意花时间探索网站内容。然而,需要注意的是,由于插件依赖Flash技术,可能在某些不支持Flash的设备或浏览器上无法正常显示。因此,在部署时,应...

    wp-cumulus(支持中文标签)

    2. **中文支持**:与许多其他标签云插件不同,`wp-cumulus`特别支持中文标签,这意味着中国用户可以无障碍地在自己的博客上使用该插件,展示中文标签内容。 3. **swfobject.js集成**:`swfobject.js`是一个...

    3D标签云单机中文版 WP-CUMULUS 1.23

    大名鼎鼎的WP-CUMULUS 3D标签云,已经改成支持中文标签,可在.htm自行添加标签链接,可以单机玩耍测试,不需要安装WordPress然后装插件~~ 主要是有些童鞋只是想要3D标签云动画,所以就提取重要文件出来稍作修改下.

    wp-cumulus flash动态标签云的汉化插件 for Wordpress.rar

    而wp-cumulus插件通过3D旋转的视觉效果,使标签云更加生动有趣。 描述中提到,这个插件的大小只有7k,非常小巧,且不需要内嵌字体,这意味着它不会占用大量网站资源,易于安装和使用。然而,它不支持变色功能,这...

    wp-cumulus

    "wp-cumulus" 是一款在WordPress平台上的插件,专为博客或网站提供美观的三维标签云展示。这款插件赋予传统的标签云一个全新的视觉体验,通过立体旋转的效果,使得用户可以更直观、有趣地浏览和探索网站的各类标签。...

    wp-cumulus.rar_TagCloud._TagCloud.as_flex cumul_wp cumulus_wp cu

    "flex cumul_wp cumulus_wp cu"暗示这个插件可能是用Adobe Flex技术构建的,用于在网站上动态显示标签云,具有视觉吸引力。 【描述】"完美支持中文wp-cumulus插件源码(无锯齿无抖动7K大小)"说明这个插件是为中文...

    WP-Cumulus 标签云(flash+xml+js) 支持中文

    distr 设定: true或false 如果设置为true时,标签均匀分布的球的表面。 tcolor Hex颜色值: 0xff0000 for red. 标签典型显示颜色 tcolor2 Hex颜色值 根据标签热门程度显示梯度颜色 hicolor Hex颜色值 鼠标悬停颜色...

    标签云的工具

    在这个主题中,我们将深入探讨标签云的含义、工作原理、应用领域以及如何利用"wp-cumulus"这个特定的工具来创建和管理标签云。 标签云的基本概念: 标签云是基于内容的索引方式,用于标记和分类不同类型的文档、...

    drupal -cumulus

    与 Tagadelic 不同,Cumulus 强调了视觉效果,它使用 JavaScript 来创建动态的、3D 效果的标签云。Cumulus 的设计灵感来源于同名的云朵形状,它为网站带来了现代感和互动性。同样,Cumulus 也支持汉化,使得非英文...

    flash标签云 3D效果 PHP插件 by weefselkweekje

    服务器端利用 PHP插件 生成标签云数据,页面用 flash 3D效果展示标签,效果很爽的,放在自己博客格外吸引眼球。 查看效果: http://www.roytanck.com/about-my-themes/donations/ 下面是详细: -------------------...

    cumulus-linux-4.4.0-vx-amd64-qemu.zip

    6. **QEMU虚拟化**:通过使用“cumulus-linux-4.4.0-vx-amd64-qemu.qcow2”镜像,用户可以在本地或者云环境中快速搭建一个Cumulus Linux的仿真环境,进行功能测试、学习或开发验证,而无需物理硬件。 7. **EVE环境*...

    标签云支持中文

    【标签云支持中文】是一个重要的IT知识点,尤其在网页设计和数据可视化领域。标签云(Tag Cloud)是一种常见的用户界面元素,用于展示关键词或标签,通常用来表示网站内容的分类或者用户生成的内容标签。它通过字体...

    WordPress 3D标签中文版

    在WordPress中,标签云是一种常见的组织和显示内容的方式,它以文字大小表示各个标签的使用频率。然而,传统的标签云通常只是平面的文本列表,缺乏视觉吸引力。而“WordPress 3D云标签中文版”则利用先进的图形技术...

    SP2010 3D 标签云 Web部件

    建立在内置标签云Web部件和WordPress的Cumulus插件基础上。 它和标准标签云有相同的设置,但是以美妙的3D云效果呈现。 请注意,这个Web部件依靠SP标签功能,只能在SP Server 2010上可用,所以在SP Foundation 2010...

    cumulus(浑天仪)使用手册

    标签云常用于博客、网站中,以图形化的方式显示各种标签的相对重要性,标签越大,表示其在数据中的出现频率越高。 在使用Cumulus时,首先需要理解其基本架构和工作流程。这可能包括设置项目、导入数据、配置标签...

    wordpress淡色调百搭主题 v3.9

    压缩包中已经有了以下插件:lightbox-plus :点击图片放大的插件nextgen-gallery:非常强大的相册插件wp-cumulus: flash动画标签云 可以插入到小工具中插件安装方法:插件–安装插件—上传 完成之后启用即可 安装:...

    Python库 | cumulus-1.1.0.tar.gz

    标签中提到的“开发语言”和“Python库”表明cumulus是用Python编写的,并设计为其他Python开发者使用。Python以其简洁易读的语法和丰富的库生态系统而著名,使得开发人员能够快速构建应用程序。此外,“后端”标签...

    wordpress HTML我帮您整站源码 v1.2.rar

     标签Tags:WP-Cumulus 启动插件后 设置--》固定链接--》 选择自定义结构:/%post_id% 分类目录前缀:直接输入一个. 首页左边导航直接可以通过 外观--主题选项 首页左侧分类布局设置: 此分类为首页左侧...

    Cumulus:一个基于网络编码的分布式文件系统.pdf

    Cumulus 就是在HDFS的基础上,通过引入网络编码技术来解决这些问题。 在网络编码中,数据块在节点间传输时进行编码操作,使得每个节点收到的数据组合可以更有效地用于恢复原始数据。这样,即使某些节点或数据块丢失...

Global site tag (gtag.js) - Google Analytics