封装 wp-cumulus 中的3D标签云，使之用在普通的网页上（php）。

huiselele · 发表于 2017-4-13 11:44:12

　　看到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效果的云标签了。
　　效果图：

　　附件中有完整代码。
　　注意：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)"表示的是此词条出现的频率，必须按此格式来才可以。

账号		自动登录	找回密码
密码			立即注册

HERE 使用 AWS EF 和 JFrog Artifactory 打

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

[经验分享] 封装 wp-cumulus 中的3D标签云，使之用在普通的网页上（php）。

浏览过的版块

扫码加入运维网微信交流群