点点3D标签云实现方法

2012年09月20日 | 分享 | 2条评论

还记得以前刚用wp的3D标签云插件实现了3D效果,感觉很美观,当时也没有去多研究太多里面的调用什么的,而且是由FLASH组成的,对flash只有初步了解的我,还真看不出个所以然。

其实wordpress也差不多,只是调用函数不一样罢了。

现在转到点点了,以为不能用这个效果了,但是那天在模板公园看到有人用了,所以马上就把他给掰下来了...,且用在了我之前发布的monochrome免费主题上。

现在就在这里分享下调用的方法吧。

以下就是3D标签云的代码

div部分

<div id="Tags"></div>  

把这个div放在你要实现的地方即可,当然你需要用css定位下才能是实现你需要的效果,比如我加载的css后的内容

<div id="Tags" class="width:200px;margin:-5px auto -15px;"></div>  

然后就是主要的js部分啦

<script type="text/javascript" src="http://x.papaapp.com/farm1/9bd5eb/7759b4bb/A1BC4.js"></script>  
<script type="text/javascript">  
var rnumber = Math.floor(Math.random()*9999999);  
var cloud = new SWFObject("http://x.papaapp.com/farm1/9bd5eb/d08ffe76/33D42.swf?r="+rnumber, "tagcloudflash", "200", "200", "9", "#000000");  
var content;  
cloud.addParam("wmode", "transparent");  
cloud.addParam("allowScriptAccess", "always");  
cloud.addVariable("tspeed", "120");  
cloud.addVariable("mode", "tags");  
cloud.addVariable("ncolor", "0x2Eaa00");  
cloud.addVariable("distr", "true");  
{?tags}  
{?loop:tags}  
content+=escape('<a href="{$tag.url}" >')+'{$tag.name}'+escape('</a>')  
{/loop:tags}  
{/tags}  
cloud.addVariable("tagcloud", escape('<tags>')+content+escape('</tags>'));  
cloud.write("Tags");  
</script>  

把以上部分放入body内就可以了。

值得一题的是,js的第4行中的“200”“200”为改标签云的长度和高度,后面的“#000000”为flash的背景颜色(目前暂未发现“9”是干嘛用的)可根据需要设定,第10行中的0x2Eaa00为标签云中标签的颜色代码,不知道是什么类型的,之前找了好久都不知道这个颜色代码怎么写的(这就是我现用的站点主题neutral一直没加上这个3D标签云的原因,也是一直没有发布这个教程的原因之一。。。),今晚终于找到一个对应的颜色表,顺便附上。

还有,由于本3D标签云是通过flash实现的,所以载入速度会慢点,可能会拖慢整个网站速度,大家权衡下利弊考虑加入与否。

"black"=>array( 0x000000),黑色  
"maroon"=>array( 0x800000), 栗色  
"green"=>array( 0x008000), 绿色  
"olive"=>array( 0x808000), 橄榄色  
"navy"=>array( 0x000080), 藏青色  
"purple"=>array( 0x800080), 紫色  
"teal"=>array( 0x008080), 凫蓝:适度或深色的带蓝色的绿色到呈绿色的蓝色  
"gray"=>array( 0x808080), 灰色  
"silver"=>array( 0xC0C0C0), 银色  
"red"=>array( 0xFF0000), 红色  
"lime"=>array( 0x00FF00),  
"yellow"=>array( 0xFFFF00), 黄色  
"blue"=>array( 0x0000FF), 蓝色  
"fuchsia"=>array( 0xFF00FF), 紫红  
"aqua"=>array( 0x00FFFF), 浅绿色  
"white"=>array( 0xFFFFFF), 白色 Netscape and IE所附加定义的颜色  
"aliceblue"=>array( 0xF0F8FF),  
"antiquewhite"=>array( 0xFAEBD7),  
"aquamarine"=>array( 0x7FFFD4),  
"azure"=>array( 0xF0FFFF),  
"beige"=>array( 0xF5F5DC),  
"blueviolet"=>array( 0x8A2BE2),  
"brown"=>array( 0xA52A2A),  
"burlywood"=>array( 0xDEB887),  
"cadetblue"=>array( 0x5F9EA0),  
"chartreuse"=>array( 0x7FFF00),  
"chocolate"=>array( 0xD2691E),  
"coral"=>array( 0xFF7F50),  
"cornflowerblue"=>array( 0x6495ED),  
"cornsilk"=>array( 0xFFF8DC),  
"crimson"=>array( 0xDC143C),  
"darkblue"=>array( 0x00008B),  
"darkcyan"=>array( 0x008B8B),  
"darkgoldenrod"=>array( 0xB8860B),  
"darkgray"=>array( 0xA9A9A9),  
"darkgreen"=>array( 0x006400),  
"darkkhaki"=>array( 0xBDB76B),  
"darkmagenta"=>array( 0x8B008B),  
"darkolivegreen"=>array( 0x556B2F),  
"darkorange"=>array( 0xFF8C00),  
"darkorchid"=>array( 0x9932CC),  
"darkred"=>array( 0x8B0000),  
"darksalmon"=>array( 0xE9967A),  
"darkseagreen"=>array( 0x8FBC8F),  
"darkslateblue"=>array( 0x483D8B),  
"darkslategray"=>array( 0x2F4F4F),  
"darkturquoise"=>array( 0x00CED1),  
"darkviolet"=>array( 0x9400D3),  
"deeppink"=>array( 0xFF1493),  
"deepskyblue"=>array( 0x00BFFF),  
"dimgray"=>array( 0x696969),  
"dodgerblue"=>array( 0x1E90FF),  
"firebrick"=>array( 0xB22222),  
"floralwhite"=>array( 0xFxFAF0),  
"forestgreen"=>array( 0x228B22),  
"gainsboro"=>array( 0xDCDCDC),  
"ghostwhite"=>array( 0xF8F8FF),  
"gold"=>array( 0xFFD700),  
"goldenrod"=>array( 0xDAA520),  
"greenyellow"=>array( 0xADFF2F),  
"honeydew"=>array( 0xF0FFF0),  
"hotpink"=>array( 0xFF69B4),  
"indianred"=>array( 0xCD5C5C),  
"indigo"=>array( 0x4B0082),  
"ivory"=>array( 0xFFFFF0),  
"khaki"=>array( 0xF0E68C),  
"lavender"=>array( 0xE6E6FA),  
"lavenderblush"=>array( 0xFFF0F5),  
"lawngreen"=>array( 0x7CFC00),  
"lemonchiffon"=>array( 0xFFFACD),  
"lightblue"=>array( 0xADD8E6),  
"lightcoral"=>array( 0xF08080),  
"lightcyan"=>array( 0xE0FFFF),  
"lightgoldenrodyellow"=>array( 0xFAFAD2),  
"lightgreen"=>array( 0x90EE90),  
"lightgrey"=>array( 0xD3D3D3),  
"lightpink"=>array( 0xFFB6C1),  
"lightsalmon"=>array( 0xFFA07A),  
"lightseagreen"=>array( 0x20B2AA),  
"lightskyblue"=>array( 0x87CEFA),  
"lightslategray"=>array( 0x778899),  
"lightsteelblue"=>array( 0xB0C4DE),  
"lightyellow"=>array( 0xFFFFE0),  
"limegreen"=>array( 0x32CD32),  
"linen"=>array( 0xFAF0E6),  
"mediumaquamarine"=>array( 0x66CDAA),  
"mediumblue"=>array( 0x0000CD),  
"mediumorchid"=>array( 0xBA55D3),  
"mediumpurple"=>array( 0x9370D0),  
"mediumseagreen"=>array( 0x3CB371),  
"mediumslateblue"=>array( 0x7B68EE),  
"mediumspringgreen"=>array( 0x00FA9A),  
"mediumturquoise"=>array( 0x48D1CC),  
"mediumvioletred"=>array( 0xC71585),  
"midnightblue"=>array( 0x191970),  
"mintcream"=>array( 0xF5FFFA),  
"mistyrose"=>array( 0xFFE4E1),  
"moccasin"=>array( 0xFFE4B5),  
"navajowhite"=>array( 0xFFDEAD),  
"oldlace"=>array( 0xFDF5E6),  
"olivedrab"=>array( 0x6B8E23),  
"orange"=>array( 0xFFA500),  
"orangered"=>array( 0xFF4500),  
"orchid"=>array( 0xDA70D6),  
"palegoldenrod"=>array( 0xEEE8AA),  
"palegreen"=>array( 0x98FB98),  
"paleturquoise"=>array( 0xAFEEEE),  
"palevioletred"=>array( 0xDB7093),  
"papayawhip"=>array( 0xFFEFD5),  
"peachpuff"=>array( 0xFFDAB9),  
"peru"=>array( 0xCD853F),  
"pink"=>array( 0xFFC0CB),  
"plum"=>array( 0xDDA0DD),  
"powderblue"=>array( 0xB0E0E6),  
"rosybrown"=>array( 0xBC8F8F),  
"royalblue"=>array( 0x4169E1),  
"saddlebrown"=>array( 0x8B4513),  
"salmon"=>array( 0xFA8072),  
"sandybrown"=>array( 0xF4A460),  
"seagreen"=>array( 0x2E8B57),  
"seashell"=>array( 0xFFF5EE),  
"sienna"=>array( 0xA0522D),  
"skyblue"=>array( 0x87CEEB),  
"slateblue"=>array( 0x6A5ACD),  
"slategray"=>array( 0x708090),  
"snow"=>array( 0xFFFAFA),  
"springgreen"=>array( 0x00Fx7F),  
"steelblue"=>array( 0x4682B4),  
"tan"=>array( 0xD2B48C),  
"thistle"=>array( 0xD8BFD8),  
"tomato"=>array( 0xFF6347),  
"turquoise"=>array( 0x40E0D0),  
"violet"=>array( 0xEE82EE),  
"wheat"=>array( 0xF5DEB3),  
"whitesmoke"=>array( 0xF5F5F5),  
"yellowgreen"=>array( 0x9ACD32));  

搞定收工。。。

(加个图使列表页效果好看点...)

ps:限定标签个数用{#sys:tags.number|value:"10"}定义即可。

发布评论