男丁格爾's 脫殼玩

沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

3D Tag Sphere 是一個可透過滑鼠滾輪來縮放及移動的 3D 標籤雲。讓你的標籤雲的展現方式就是比別人更有不同的效果。

套件名稱：3D Tag Sphere
套件版本：0.3
作者網站：http://bitbucket.org/elbeanio/jquery.tagsphere/overview
套件網址：http://plugins.jquery.com/project/tag-sphere
發佈日期：2010-07-17
檔案大小：13.5 KB
檔案下載：jquery.tagsphere.js

參數說明：

檢視原始碼 JavaScript

zoom(選填)
描述： 初始的縮放比例
預設值： 75
 
min_zoom(選填)
描述： 最小的縮放比例
預設值： 25
 
max_zoom(選填)
描述： 最大的縮放比例
預設值： 120
 
zoom_factor(選填)
描述： 滾動滑鼠滾輪時的縮放值
預設值： 2
 
rotate_by(選填)
描述： 旋轉的角度
預設值： -1.75
 
fps(選填)
描述： 每秒更新的速度
預設值： 10
 
centrex(選填)
描述： 容器水平的中心點
預設值： 250
 
centrey(選填)
描述： 容器垂直的中心點
預設值： 259
 
min_font_size(選填)
描述： 最小的字型尺寸
預設值： 12
 
max_font_size(選填)
描述： 最大的字型尺寸
預設值： 32
 
font_units(選填)
描述： 字型尺寸的單位
預設值： 'px'
 
random_points(選填)
描述： 用來增加效果的隨機座標點
預設值： 0

方法說明：

檢視原始碼 JavaScript

1 2	// 把指定區塊的內容轉換成 3D 標籤雲 $(selector).tagcloud(options);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.tagsphere.js"></script>
<style type="text/css">
	#ts1 {
		width: 400px;
		height: 400px;
		background-color: #000;
		position: relative;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #ts1 中的內容轉成 3D 標籤雲
		// 設定其中心點為 200m 200
		// 最小字型大小為 10px, 最大字型為 32px
		 $('#ts1').tagcloud({
			centrex: 200,
			centrey: 200,
			min_font_size: 10,
			max_font_size: 32
		});
	});
</script>
 
<body>
	<div id="ts1">
		<ul>
			<li><a href='#' rel='31'>Effects</a></li>
			<li><a href='#' rel='17'>Forms</a></li>
			<li><a href='#' rel='5'>開心農場</a></li>
			<li><a href='#' rel='5'>Ext JS</a></li>
			<li><a href='#' rel='3'>AutoIt v3</a></li>
			<li><a href='#' rel='21'>Tips</a></li>
			<li><a href='#' rel='12'>My</a></li>
			<li><a href='#' rel='37'>JavaScript</a></li>
			<li><a href='#' rel='11'>Android</a></li>
			<li><a href='#' rel='51'>VB</a></li>
			<li><a href='#' rel='4'>Menu</a></li>
			<li><a href='#' rel='7'>jQuery 廣告</a></li>
			<li><a href='#' rel='9'>.NET</a></li>
			<li><a href='#' rel='3'>IDE</a></li>
			<li><a href='#' rel='51'>Windows API</a></li>
		</ul>
	</div>
</body>