標題: 球狀 3D 旋轉的標籤雲 [打印本頁]
作者: wmh 時間: 2010-5-19 23:37 標題: 球狀 3D 旋轉的標籤雲
英文作者：http://www.roytanck.com/
中文修改：http://www.lostleon.com/blog/
檔案下載：http://www.lostleon.com/blog/wp- ... umulus/tagcloud.swf
[jsg.example]<embed type="application/x-shockwave-flash" src="http://jsgears.googlecode.com/svn/trunk/wp-cumulus/tagcloud.swf" width="250" height="250" id="tagcloudflash" name="tagcloudflash" bgcolor="#ffffff" quality="high" allowscriptaccess="always" flashvars="tcolor=0x111111&tcolor2=0x666666&hicolor=0x0066FF&tspeed=150&distr=true&mode=tags&tagcloud=%3Ctags%3E%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-jquery.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EjQuery%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E5%25AE%2589%25E8%2597%25A4%25E5%25BF%25A0%25E9%259B%2584.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E5%AE%89%E8%97%A4%E5%BF%A0%E9%9B%84%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Bugs.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EBugs%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Gmail.html%22+class%3D%22tagl1%22+title%3D%222%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EGmail%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-dojo.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3Edojo%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Maps.html%22+class%3D%22tagl1%22+title%3D%225%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EMaps%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-PHP.html%22+class%3D%22tagl1%22+title%3D%224%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EPHP%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E8%2590%25BD%25E6%25B0%25B4%25E5%25B1%25B1%25E8%258E%258A.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E8%90%BD%E6%B0%B4%E5%B1%B1%E8%8E%8A%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Yahoo.html%22+class%3D%22tagl1%22+title%3D%223%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EYahoo%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E5%25BB%258A%25E9%25A6%2599%25E6%2595%2599%25E5%25A0%2582.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E5%BB%8A%E9%A6%99%E6%95%99%E5%A0%82%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-BlogLive.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EBlogLive%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E8%25B6%25A8%25E5%258B%25A2.html%22+class%3D%22tagl1%22+title%3D%225%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E8%B6%A8%E5%8B%A2%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-IronRuby.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EIronRuby%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Blog.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EBlog%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-TechTalk.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3ETechTalk%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-dotNET.html%22+class%3D%22tagl1%22+title%3D%222%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EdotNET%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Google.html%22+class%3D%22tagl2%22+title%3D%2210%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EGoogle%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E6%2595%2588%25E8%2583%25BD%25E5%2584%25AA%25E5%258C%2596.html%22+class%3D%22tagl1%22+title%3D%222%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E6%95%88%E8%83%BD%E5%84%AA%E5%8C%96%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-cachefile.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3Ecachefile%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-GeSHi.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EGeSHi%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-MooTools.html%22+class%3D%22tagl2%22+title%3D%227%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EMooTools%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Tetris.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3ETetris%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E8%25B3%2580%25E5%258D%25A1.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E8%B3%80%E5%8D%A1%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E8%25B6%2585%25E7%25B4%259A%25E7%2591%25AA%25E8%258E%2589.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E8%B6%85%E7%B4%9A%E7%91%AA%E8%8E%89%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Mockups.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EMockups%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E6%259B%25B8%25E7%25B1%258D.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E6%9B%B8%E7%B1%8D%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-ExtCore.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EExtCore%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-datePicker.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EdatePicker%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-API.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EAPI%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-DNS.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EDNS%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-BlockUI.html%22+class%3D%22tagl1%22+title%3D%222%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EBlockUI%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Gadget.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EGadget%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E9%2581%258A%25E6%2588%25B2.html%22+class%3D%22tagl2%22+title%3D%226%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E9%81%8A%E6%88%B2%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-colorPicker.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EcolorPicker%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Games.html%22+class%3D%22tagl1%22+title%3D%222%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EGames%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-UserInterface.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EUserInterface%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-UserExperience.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EUserExperience%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-%25E6%2596%2587%25E4%25BB%25B6.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3E%E6%96%87%E4%BB%B6%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Hosting.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3EHosting%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-Trac.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3ETrac%3C%2Fa%3E%0A%3Ca+href%3D%22http%3A%2F%2Fjsgears.com%2Ftag-SVN.html%22+rel%3D%27tag%27+style%3D%27font-size%3A+8pt%3B%27%3ESVN%3C%2Fa%3E%0A%3C%2Ftags%3E"> [/jsg.example]
這原本是寫給 wordpress 用的一個 plugin，但是其實只要取得 swf 後，自己把參數組好一樣可以使用。
要傳入 swf 是以下一段 html：
<tags>
<a href="http://jsgears.com/" target="_blank">jsGears</a>
<a href="http://www.google.com/" target="_blank">Google</a>
<a href="http://www.yahoo.com/" target="_blank">Yahoo!</a>
...
</tags>
其中 href 的部份必須是完整包含 domain name 的 URL，然後做 url encode 後，帶入 swf 的參數，範例如下 (PHP)：
<embed type="application/x-shockwave-flash" src="tagcloud.swf" width="215" height="250"
id="tagcloudflash" name="tagcloudflash" bgcolor="#ffffff" quality="high" allowscriptaccess="always"
flashvars="tcolor=0x111111&tcolor2=0x666666&hicolor=0x0066FF&tspeed=150&distr=true&mode=tags&tagcloud=<?php echo $encoded_html; ?>">
作者: lerobot321 時間: 2011-10-29 12:09
哇~~~這個超酷的
作者: mamameia 時間: 2011-11-24 21:45
非常方便又實用的工具! 感謝您的分享
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|