溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery插件(一）：JQCloud

發(fā)布時(shí)間：2020-06-27 12:55:05 來(lái)源：網(wǎng)絡(luò) 閱讀：18621 作者：dearkerwin 欄目：web開(kāi)發(fā)

jqcloud是一個(gè)標(biāo)簽云的插件，先看例子，再看用法

一、簡(jiǎn)單的示例

1、截圖

jquery插件(一）：JQCloud

jqcloud示例 — ifxoxo.com/jquery-jqcloud.html

2、具體代碼

<script type="text/javascript">
var word_list =[
{text:"ifxoxo.com", weight:13,link:"http://ifxoxo.com/jquery-jqcloud.html"},
{text:"520xmn.com", weight:10.5}，
{text:"jquery", weight:9.4},
{text:"jqcloud", weight:8},
{text:"ifxoxo1", weight:6.2},
{text:"ifxoxo2", weight:5},
{text:"ifxoxo3", weight:5},
{text:"Nam et", weight:5},
{text:"Sapien", weight:4},
{text:"Pellentesque", weight:3},
{text:"et malesuada", weight:3},
{text:"fames", weight:2},
{text:"sit amet", weight:2},
{text:"justo", weight:1},
{text:"dictum", weight:1},
{text:"Ut et leo", weight:1},
];
$(function(){
  $("#my_words").jQCloud(word_list);
});
</script>
<h2>jQCloud Example</h2>
<h4>--from http://ifxoxo.com/jquery-jqcloud.html</h4>
<div id="my_words" style="width: 550px; height: 350px;">
</div>

二、具體用法

1、下載所需的資源

（1）jquery
（2）jqcloud插件

下載地址：https://github.com/lucaong/jQCloud
解壓之后在/jqcloud/文件夾下面找到j(luò)qcloud.css 和 jqcloud-1.0.4.js

//加載的時(shí)候注意文件的路徑
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqcloud-1.0.4.js"></script>
<linkrel="stylesheet"type="text/css"href="jqcloud.css"/>

2、所需的html

需要一個(gè)用來(lái)展示jqcloud的元素(div ,span等)， 元素如果不指定寬和高，則需要在js中增加參數(shù)

<div id="my_words" style="width: 550px; height: 350px;"></div>

3、js部分

（1）需要一個(gè)用json格式存的數(shù)據(jù)

至少需要指定每一項(xiàng)的text和weight，jqcloud會(huì)根據(jù)所有文字的權(quán)重，計(jì)算出合適的百分比。格式詳見(jiàn)代碼
text：展現(xiàn)的文字
weight：文字的權(quán)重

var word_list =[
{text:"ifxoxo.com", weight:13},
{text:"520xmn.com", weight:10.5},
{text:"jquery", weight:9.4},
{text:"jqcloud", weight:8},
{text:"ifxoxo1", weight:6.2}
];
（2）執(zhí)行部分

調(diào)用jQCloud函數(shù)（注意大小寫(xiě)）

$("#my_words").jQCloud(word_list);
// word_list就是（1）中準(zhǔn)備的數(shù)據(jù)
（3）參數(shù)

以下是jQCloud的參數(shù)

參數(shù) 默認(rèn)值 作用
 width  “” 設(shè)置cloud的寬度，默認(rèn)是原來(lái)的寬度
height  “”  設(shè)置cloud的高度，默認(rèn)是原來(lái)的高度
centerobjectword在相對(duì)于cloud元素的x、y坐標(biāo)，默認(rèn)是cloud元素的中心。
如 {x: 300, y: 150}
afterCloudRender“”在cloud呈現(xiàn)之后的回調(diào)函數(shù)
delayedModetrue是否用延時(shí)模式。
如果設(shè)置為true，word會(huì)一個(gè)一個(gè)加載，每個(gè)之間會(huì)有微小的延時(shí)。
當(dāng)word超過(guò)50個(gè)的時(shí)候，默認(rèn)會(huì)是true
shapeellipticcloud的形狀。支持 elliptic（橢圓形） 和 rectangular （矩形）
默認(rèn)是elliptic
removeOverflowingtrue如果設(shè)置為true, 如果一個(gè)word超出了cloud元素的大小，則自動(dòng)剔除

參數(shù)示例

$("#my_words").jQCloud(word_list,{
              removeOverflowing:true,
              width:500,
              height:500,
              shape :"rectangular",
});

4、json數(shù)據(jù)的其他用法

（1）可以指定一個(gè)超鏈接: link

{text: “ifxoxo.com”, weight: 13, link: {href: “http://ifxoxo.com/jquery-jqcloud.html”, target: “_blank”} }

（2）可以增加html屬性: html

{text: “520xmn.com”, weight: 10,html: {title: “My Title”, “class”: “custom-class”}}

（3）增加js事件:handlers (比如click, mouseOver)

{text: “520xmn.com”, weight: 15, handlers: {click: function(){alert(“from –ifxoxo.com”)}} }

5、修改css文件

如果對(duì)顏色和字體打大小不滿意，可以修改默認(rèn)的css文件–jqcloud.css
根據(jù)自己的需要，修改font-size 和 color

  div.jqcloud span.w10 { font-size:550%;}
  div.jqcloud span.w10 { color:#0cf; }

本文地址：http://ifxoxo.com/jquery-jqcloud.html
轉(zhuǎn)載請(qǐng)注明出處


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手