jquery 3D 標(biāo)簽云示例代碼
更新時(shí)間：2014年06月12日 15:21:34 投稿：whsnow
標(biāo)簽云想必大家都有見到過(guò)吧，那么3D標(biāo)簽云，有沒有接觸過(guò)呢？本例為大家介紹下通過(guò)jquery 實(shí)現(xiàn)的3D標(biāo)簽云，感興趣的朋友可以參考下
相關(guān)選項(xiàng)
zoom: 90 初始的縮放度
min_zoom: 25
max_zoom: 120
zoom_factor: 2 - 鼠標(biāo)滾輪的縮放速度
rotate_factor: -0.45 - 鼠標(biāo)移動(dòng)時(shí)球體旋轉(zhuǎn)的數(shù)量。正數(shù)將反向旋轉(zhuǎn)
fps: 10 - 定義每秒動(dòng)畫更新的次數(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 - 添加一些隨機(jī)的點(diǎn)到球體來(lái)提高效果
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標(biāo)簽：
<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 - 鼠標(biāo)滾輪的縮放速度
rotate_factor: -0.45 - 鼠標(biāo)移動(dòng)時(shí)球體旋轉(zhuǎn)的數(shù)量。正數(shù)將反向旋轉(zhuǎn)
fps: 10 - 定義每秒動(dòng)畫更新的次數(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 - 添加一些隨機(jī)的點(diǎn)到球體來(lái)提高效果
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標(biāo)簽：
復(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>
您可能感興趣的文章:
- 用JS實(shí)現(xiàn)3D球狀標(biāo)簽云示例代碼
- js簡(jiǎn)單實(shí)現(xiàn)標(biāo)簽云效果實(shí)例
- javascript實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽云
- JavaScript實(shí)現(xiàn)的圓形浮動(dòng)標(biāo)簽云效果實(shí)例
- 教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼
- Javascript隨機(jī)標(biāo)簽云代碼實(shí)例
- 深入解析JS實(shí)現(xiàn)3D標(biāo)簽云的原理與方法
- vue實(shí)現(xiàn)標(biāo)簽云效果的方法詳解
相關(guān)文章
JQuery省市聯(lián)動(dòng)效果實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了JQuery省市聯(lián)動(dòng)效果實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
15個(gè)值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得總結(jié)【經(jīng)典收藏】
這篇文章主要介紹了15個(gè)值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得,詳細(xì)總結(jié)分析了jQuery常用的開發(fā)技巧,需要的朋友可以參考下2016-05-05
簡(jiǎn)單實(shí)現(xiàn)jQuery彈幕效果
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)jQuery彈幕效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery不兼容input的change事件問(wèn)題解決過(guò)程
本文記錄了在項(xiàng)目中發(fā)現(xiàn)在IE9中不會(huì)立即觸發(fā)change事件，存在兼容問(wèn)題的解決過(guò)程，非常的詳盡，解決過(guò)程中也有新問(wèn)題出現(xiàn)，最終都解決完畢，完美實(shí)現(xiàn)了兼容各大主流瀏覽器2014-12-12
$(document).ready(fn):當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)，因?yàn)樗梢詷O大地提高web應(yīng)用程序的響應(yīng)速度2014-07-07
利用JQuery實(shí)現(xiàn)datatables插件的增加和刪除行功能
這篇文章給大家介紹了jquery實(shí)現(xiàn)datatables插件的增加和刪除行的功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
本文主要介紹了jquery實(shí)現(xiàn)下拉框左右選擇功能的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器,實(shí)例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06
基于jquery的loading 加載提示效果實(shí)現(xiàn)代碼
有時(shí)候?yàn)榱烁玫挠脩趔w驗(yàn)，使用jquery的朋友可以參考下代碼。2011-09-09
很簡(jiǎn)單的一個(gè)效果插件,但不是經(jīng)常用,怕忘了,以后在用又要去看文檔,所以現(xiàn)在把筆記寫下來(lái),方便以后2010-08-08