点点3D标签云实现方法

2012.09.20 分享 4077 人浏览 2 条留言

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

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

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

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

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

div部分

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

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

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

然后就是主要的js部分啦

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

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

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

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

  1. "black"=>array( 0x000000),黑色  
  2. "maroon"=>array( 0x800000), 栗色  
  3. "green"=>array( 0x008000), 绿色  
  4. "olive"=>array( 0x808000), 橄榄色  
  5. "navy"=>array( 0x000080), 藏青色  
  6. "purple"=>array( 0x800080), 紫色  
  7. "teal"=>array( 0x008080), 凫蓝:适度或深色的带蓝色的绿色到呈绿色的蓝色  
  8. "gray"=>array( 0x808080), 灰色  
  9. "silver"=>array( 0xC0C0C0), 银色  
  10. "red"=>array( 0xFF0000), 红色  
  11. "lime"=>array( 0x00FF00),  
  12. "yellow"=>array( 0xFFFF00), 黄色  
  13. "blue"=>array( 0x0000FF), 蓝色  
  14. "fuchsia"=>array( 0xFF00FF), 紫红  
  15. "aqua"=>array( 0x00FFFF), 浅绿色  
  16. "white"=>array( 0xFFFFFF), 白色 Netscape and IE所附加定义的颜色  
  17. "aliceblue"=>array( 0xF0F8FF),  
  18. "antiquewhite"=>array( 0xFAEBD7),  
  19. "aquamarine"=>array( 0x7FFFD4),  
  20. "azure"=>array( 0xF0FFFF),  
  21. "beige"=>array( 0xF5F5DC),  
  22. "blueviolet"=>array( 0x8A2BE2),  
  23. "brown"=>array( 0xA52A2A),  
  24. "burlywood"=>array( 0xDEB887),  
  25. "cadetblue"=>array( 0x5F9EA0),  
  26. "chartreuse"=>array( 0x7FFF00),  
  27. "chocolate"=>array( 0xD2691E),  
  28. "coral"=>array( 0xFF7F50),  
  29. "cornflowerblue"=>array( 0x6495ED),  
  30. "cornsilk"=>array( 0xFFF8DC),  
  31. "crimson"=>array( 0xDC143C),  
  32. "darkblue"=>array( 0x00008B),  
  33. "darkcyan"=>array( 0x008B8B),  
  34. "darkgoldenrod"=>array( 0xB8860B),  
  35. "darkgray"=>array( 0xA9A9A9),  
  36. "darkgreen"=>array( 0x006400),  
  37. "darkkhaki"=>array( 0xBDB76B),  
  38. "darkmagenta"=>array( 0x8B008B),  
  39. "darkolivegreen"=>array( 0x556B2F),  
  40. "darkorange"=>array( 0xFF8C00),  
  41. "darkorchid"=>array( 0x9932CC),  
  42. "darkred"=>array( 0x8B0000),  
  43. "darksalmon"=>array( 0xE9967A),  
  44. "darkseagreen"=>array( 0x8FBC8F),  
  45. "darkslateblue"=>array( 0x483D8B),  
  46. "darkslategray"=>array( 0x2F4F4F),  
  47. "darkturquoise"=>array( 0x00CED1),  
  48. "darkviolet"=>array( 0x9400D3),  
  49. "deeppink"=>array( 0xFF1493),  
  50. "deepskyblue"=>array( 0x00BFFF),  
  51. "dimgray"=>array( 0x696969),  
  52. "dodgerblue"=>array( 0x1E90FF),  
  53. "firebrick"=>array( 0xB22222),  
  54. "floralwhite"=>array( 0xFxFAF0),  
  55. "forestgreen"=>array( 0x228B22),  
  56. "gainsboro"=>array( 0xDCDCDC),  
  57. "ghostwhite"=>array( 0xF8F8FF),  
  58. "gold"=>array( 0xFFD700),  
  59. "goldenrod"=>array( 0xDAA520),  
  60. "greenyellow"=>array( 0xADFF2F),  
  61. "honeydew"=>array( 0xF0FFF0),  
  62. "hotpink"=>array( 0xFF69B4),  
  63. "indianred"=>array( 0xCD5C5C),  
  64. "indigo"=>array( 0x4B0082),  
  65. "ivory"=>array( 0xFFFFF0),  
  66. "khaki"=>array( 0xF0E68C),  
  67. "lavender"=>array( 0xE6E6FA),  
  68. "lavenderblush"=>array( 0xFFF0F5),  
  69. "lawngreen"=>array( 0x7CFC00),  
  70. "lemonchiffon"=>array( 0xFFFACD),  
  71. "lightblue"=>array( 0xADD8E6),  
  72. "lightcoral"=>array( 0xF08080),  
  73. "lightcyan"=>array( 0xE0FFFF),  
  74. "lightgoldenrodyellow"=>array( 0xFAFAD2),  
  75. "lightgreen"=>array( 0x90EE90),  
  76. "lightgrey"=>array( 0xD3D3D3),  
  77. "lightpink"=>array( 0xFFB6C1),  
  78. "lightsalmon"=>array( 0xFFA07A),  
  79. "lightseagreen"=>array( 0x20B2AA),  
  80. "lightskyblue"=>array( 0x87CEFA),  
  81. "lightslategray"=>array( 0x778899),  
  82. "lightsteelblue"=>array( 0xB0C4DE),  
  83. "lightyellow"=>array( 0xFFFFE0),  
  84. "limegreen"=>array( 0x32CD32),  
  85. "linen"=>array( 0xFAF0E6),  
  86. "mediumaquamarine"=>array( 0x66CDAA),  
  87. "mediumblue"=>array( 0x0000CD),  
  88. "mediumorchid"=>array( 0xBA55D3),  
  89. "mediumpurple"=>array( 0x9370D0),  
  90. "mediumseagreen"=>array( 0x3CB371),  
  91. "mediumslateblue"=>array( 0x7B68EE),  
  92. "mediumspringgreen"=>array( 0x00FA9A),  
  93. "mediumturquoise"=>array( 0x48D1CC),  
  94. "mediumvioletred"=>array( 0xC71585),  
  95. "midnightblue"=>array( 0x191970),  
  96. "mintcream"=>array( 0xF5FFFA),  
  97. "mistyrose"=>array( 0xFFE4E1),  
  98. "moccasin"=>array( 0xFFE4B5),  
  99. "navajowhite"=>array( 0xFFDEAD),  
  100. "oldlace"=>array( 0xFDF5E6),  
  101. "olivedrab"=>array( 0x6B8E23),  
  102. "orange"=>array( 0xFFA500),  
  103. "orangered"=>array( 0xFF4500),  
  104. "orchid"=>array( 0xDA70D6),  
  105. "palegoldenrod"=>array( 0xEEE8AA),  
  106. "palegreen"=>array( 0x98FB98),  
  107. "paleturquoise"=>array( 0xAFEEEE),  
  108. "palevioletred"=>array( 0xDB7093),  
  109. "papayawhip"=>array( 0xFFEFD5),  
  110. "peachpuff"=>array( 0xFFDAB9),  
  111. "peru"=>array( 0xCD853F),  
  112. "pink"=>array( 0xFFC0CB),  
  113. "plum"=>array( 0xDDA0DD),  
  114. "powderblue"=>array( 0xB0E0E6),  
  115. "rosybrown"=>array( 0xBC8F8F),  
  116. "royalblue"=>array( 0x4169E1),  
  117. "saddlebrown"=>array( 0x8B4513),  
  118. "salmon"=>array( 0xFA8072),  
  119. "sandybrown"=>array( 0xF4A460),  
  120. "seagreen"=>array( 0x2E8B57),  
  121. "seashell"=>array( 0xFFF5EE),  
  122. "sienna"=>array( 0xA0522D),  
  123. "skyblue"=>array( 0x87CEEB),  
  124. "slateblue"=>array( 0x6A5ACD),  
  125. "slategray"=>array( 0x708090),  
  126. "snow"=>array( 0xFFFAFA),  
  127. "springgreen"=>array( 0x00Fx7F),  
  128. "steelblue"=>array( 0x4682B4),  
  129. "tan"=>array( 0xD2B48C),  
  130. "thistle"=>array( 0xD8BFD8),  
  131. "tomato"=>array( 0xFF6347),  
  132. "turquoise"=>array( 0x40E0D0),  
  133. "violet"=>array( 0xEE82EE),  
  134. "wheat"=>array( 0xF5DEB3),  
  135. "whitesmoke"=>array( 0xF5F5F5),  
  136. "yellowgreen"=>array( 0x9ACD32));  

搞定收工。。。

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

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

文章地址:http://huilang.me/3d-tag/

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif