点点3D标签云实现方法
还记得以前刚用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"}定义即可。