jquery 3D 標簽云示例代碼
更新時間：2014年06月12日 15:21:34 投稿：whsnow
標簽云想必大家都有見到過吧，那么3D標簽云，有沒有接觸過呢？本例為大家介紹下通過jquery 實現(xiàn)的3D標簽云，感興趣的朋友可以參考下
相關(guān)選項
zoom: 90 初始的縮放度
min_zoom: 25
max_zoom: 120
zoom_factor: 2 - 鼠標滾輪的縮放速度
rotate_factor: -0.45 - 鼠標移動時球體旋轉(zhuǎn)的數(shù)量。正數(shù)將反向旋轉(zhuǎn)
fps: 10 - 定義每秒動畫更新的次數(shù)
centrex: 250 - 在container div中水平方向旋轉(zhuǎn)中心
centrey: 250 在container div中垂直方向旋轉(zhuǎn)中心
min_font_size: 12
max_font_size: 32
font_units: 'px'
random_points: 50 - 添加一些隨機的點到球體來提高效果
foreground_colour: #fff - 接受的格式為： #333 #0A0A0A 和 rgb(n,n,n)
background_colour: rgb(0,0,0) - 不能使用顏色名字
Javascript代碼：
$('.tags').tagcloud();
演示中的代碼如下：
$(function(){
$('#ts1').tagcloud({centrex:250, centrey:250, init_motion_x:10, init_motion_y:10});
});
HTML標簽：
<div id="ts1" style="width:500px; height:500px; background-color:#000;">
<ul>
<li><a style="color:#f00;" rel="20">HTML</a></li>
<li><a rel="15">CSS</a></li>
<li><a rel="10">Javascript</a></li>
<li><a rel="5">jQuery</a></li>
<li><a rel="1">jQuery plugin</a></li>
<li><a rel="5">jQuery tutorial</a></li>
<li><a rel="10">jQuery howto</a></li>
<li><a rel="15">jQuery plugins</a></li>
<li><a style="color:#f00" rel="20">jQuery mobile</a></li>
<li><a rel="15">java</a></li>
<li><a rel="10">SEO</a></li>
<li><a rel="5">Quiz</a></li>
<li><a rel="1">News</a></li>
<li><a rel="5">People</a></li>
<li><a rel="10">Mobile</a></li>
<li><a rel="15">Photoshop</a></li>
<li><a style="color:#f00" rel="20">Design</a></li>
</ul>
</div>
zoom: 90 初始的縮放度
min_zoom: 25
max_zoom: 120
zoom_factor: 2 - 鼠標滾輪的縮放速度
rotate_factor: -0.45 - 鼠標移動時球體旋轉(zhuǎn)的數(shù)量。正數(shù)將反向旋轉(zhuǎn)
fps: 10 - 定義每秒動畫更新的次數(shù)
centrex: 250 - 在container div中水平方向旋轉(zhuǎn)中心
centrey: 250 在container div中垂直方向旋轉(zhuǎn)中心
min_font_size: 12
max_font_size: 32
font_units: 'px'
random_points: 50 - 添加一些隨機的點到球體來提高效果
foreground_colour: #fff - 接受的格式為： #333 #0A0A0A 和 rgb(n,n,n)
background_colour: rgb(0,0,0) - 不能使用顏色名字
Javascript代碼：
復(fù)制代碼 代碼如下:
$('.tags').tagcloud();
演示中的代碼如下：
復(fù)制代碼 代碼如下:
$(function(){
$('#ts1').tagcloud({centrex:250, centrey:250, init_motion_x:10, init_motion_y:10});
});
HTML標簽：
復(fù)制代碼 代碼如下:
<div id="ts1" style="width:500px; height:500px; background-color:#000;">
<ul>
<li><a style="color:#f00;" rel="20">HTML</a></li>
<li><a rel="15">CSS</a></li>
<li><a rel="10">Javascript</a></li>
<li><a rel="5">jQuery</a></li>
<li><a rel="1">jQuery plugin</a></li>
<li><a rel="5">jQuery tutorial</a></li>
<li><a rel="10">jQuery howto</a></li>
<li><a rel="15">jQuery plugins</a></li>
<li><a style="color:#f00" rel="20">jQuery mobile</a></li>
<li><a rel="15">java</a></li>
<li><a rel="10">SEO</a></li>
<li><a rel="5">Quiz</a></li>
<li><a rel="1">News</a></li>
<li><a rel="5">People</a></li>
<li><a rel="10">Mobile</a></li>
<li><a rel="15">Photoshop</a></li>
<li><a style="color:#f00" rel="20">Design</a></li>
</ul>
</div>
相關(guān)文章
JQuery省市聯(lián)動效果實現(xiàn)過程詳解
這篇文章主要介紹了JQuery省市聯(lián)動效果實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
15個值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得總結(jié)【經(jīng)典收藏】
這篇文章主要介紹了15個值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得,詳細總結(jié)分析了jQuery常用的開發(fā)技巧,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了簡單實現(xiàn)jQuery彈幕效果的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本文記錄了在項目中發(fā)現(xiàn)在IE9中不會立即觸發(fā)change事件，存在兼容問題的解決過程，非常的詳盡，解決過程中也有新問題出現(xiàn)，最終都解決完畢，完美實現(xiàn)了兼容各大主流瀏覽器2014-12-12
$(document).ready(fn):當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)，因為它可以極大地提高web應(yīng)用程序的響應(yīng)速度2014-07-07
利用JQuery實現(xiàn)datatables插件的增加和刪除行功能
這篇文章給大家介紹了jquery實現(xiàn)datatables插件的增加和刪除行的功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
本文主要介紹了jquery實現(xiàn)下拉框左右選擇功能的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jquery實現(xiàn)不包含當前項的選擇器,實例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06
基于jquery的loading 加載提示效果實現(xiàn)代碼
有時候為了更好的用戶體驗，使用jquery的朋友可以參考下代碼。2011-09-09
很簡單的一個效果插件,但不是經(jīng)常用,怕忘了,以后在用又要去看文檔,所以現(xiàn)在把筆記寫下來,方便以后2010-08-08