教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼
標(biāo)簽云是一套相關(guān)的標(biāo)簽以及與此相應(yīng)的權(quán)重。典型的標(biāo)簽云有30至150個(gè)標(biāo)簽。權(quán)重影響使用的字體大小或其他視覺效果。同時(shí),直方圖或餅圖表是最常用的代表約12種不同的權(quán)數(shù)。因此,標(biāo)簽云彩能代表更多的權(quán),盡管不那么準(zhǔn)確。此外,標(biāo)簽云通常是可以交互的:標(biāo)簽是典型的超鏈接,讓用戶可以仔細(xì)了解他們的內(nèi)容。
大概可以理解為一堆相關(guān)或者不相關(guān)的標(biāo)簽混到一塊,根據(jù)不同的重要程度,或者其他維度的不同來為每個(gè)標(biāo)簽設(shè)置不同的樣式已凸顯他們的不同,這樣的一堆標(biāo)簽在一起就是我們通常說的標(biāo)簽云了。
下面我們大概說一下標(biāo)簽云實(shí)現(xiàn)的原理:
明白了標(biāo)簽云是咋回事兒那么實(shí)現(xiàn)起來就簡(jiǎn)單了,其實(shí)就是根據(jù)每個(gè)標(biāo)簽的不同的重要性設(shè)置不同的樣式就可以了。
這里我們使用隨機(jī)數(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的標(biāo)簽云,不是根據(jù)某些維度來實(shí)現(xiàn),純粹的隨機(jī)樣式。這邊標(biāo)簽云實(shí)際是一堆a(bǔ)標(biāo)簽,然后隨機(jī)設(shè)置顏色和字體大小,當(dāng)然字體大小有個(gè)最大最小限制的。
1、我們?cè)O(shè)置了一個(gè)取隨機(jī)數(shù)函數(shù),和一個(gè)隨機(jī)顏色函數(shù),通過這兩個(gè)函數(shù)為標(biāo)簽設(shè)置樣式。
2、我們把所有的a標(biāo)簽循環(huán),然后利用步驟一里邊的隨機(jī)數(shù),和隨機(jī)顏色設(shè)置這些標(biāo)簽的字體大小和顏色。
查看效果如下:
一個(gè)簡(jiǎn)單的標(biāo)簽云就完事了。
其實(shí)我們還可以吧樣式設(shè)置到樣式文件,然后通過為a標(biāo)簽設(shè)置class來設(shè)置a標(biāo)簽的樣式,這樣靈活性更大。
如果需要根據(jù)某些維度來設(shè)置的話,那么可以給a標(biāo)簽設(shè)置好這種維度的屬性,然后根據(jù)這些屬性來設(shè)置樣式。
下面看代碼:
html代碼:
<div id="wrap"> <a href="#">web標(biāo)準(zhǔn)學(xué)習(xí)</a> <a href="#">css</a> <a href="#">javascript</a> <a href="#">html5</a> <a href="#">canvas</a> <a href="#">video</a> <a href="#">audio</a> <a href="#">jQuery</a> <a href="#">jQuerymobile</a> <a href="#">flash</a> <a href="#">firefox</a> <a href="#">chrome</a> <a href="#">opera</a> <a href="#">IE9</a> <a href="#">css3.0</a> <a href="#">andriod</a> <a href="#">apple</a> <a href="#">google</a> <a href="#">jobs</a> </div>
javascript代碼:
window.onload=function(){ var obox=document.getElementById("wrap"); var obj=obox.getElementsByTagName("a"); //隨機(jī)方法 function rand(num){ return parseInt(Math.random()*num+1); } //隨機(jī)顏色值 function randomcolor(){ var str=Math.ceil(Math.random()*16777215).toString(16); if(str.length<6){ str="0"+str; } return str; } //循環(huán) for( len=obj.length,i=len;i--;){ obj[i].className="color"+rand(5); obj[i].style.zIndex=rand(5); obj[i].style.fontSize=rand(12)+12+"px"; // obj[i].style.background="#"+randomcolor(); obj[i].style.color="#"+randomcolor(); obj[i].onmouseover=function(){ this.style.background="#"+randomcolor(); } obj[i].onmouseout=function(){ this.style.background="none"; } } }
以上這篇教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序wx.uploadfile 本地文件轉(zhuǎn)base64的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序wx.uploadfile 本地文件轉(zhuǎn)base64的實(shí)現(xiàn)方法,文中通過代碼講解給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06JS組件Bootstrap Table使用實(shí)例分享
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table分頁使用方法,具有一定的實(shí)用性,感興趣的小伙伴們可以參考一下2016-05-05JavaScript用select實(shí)現(xiàn)日期控件
這篇文章主要介紹了JavaScript用select實(shí)現(xiàn)日期控件的相關(guān)資料,需要的朋友可以參考下2015-07-07webpack使用Symbol.toStringTag(Symbol.toStringTag用法)
Symbol.toStringTag是一個(gè)內(nèi)置 symbol,它通常作為對(duì)象的屬性鍵使用,對(duì)應(yīng)的屬性值應(yīng)該為字符串類型,這個(gè)字符串用來表示該對(duì)象的自定義類型標(biāo)簽,這篇文章主要介紹了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以參考下2024-02-02原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換功能
本文主要介紹了使用原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換的功能,雖然jQuery有很多類似的插件,單jQuery庫著實(shí)有點(diǎn)龐大,這種小功能還是直接用javascript來做就好了。2015-01-01JavaScript動(dòng)態(tài)改變表格單元格內(nèi)容的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)改變表格單元格內(nèi)容的方法,涉及javascript操作html中table表格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03學(xué)習(xí)Javascript閉包(Closure)知識(shí)
這篇文章主要介紹了學(xué)習(xí)Javascript閉包(Closure)知識(shí)的相關(guān)資料,需要的朋友可以參考下2016-08-08如何用js實(shí)現(xiàn)鼠標(biāo)向上滾動(dòng)時(shí)浮動(dòng)導(dǎo)航
今天給大家介紹一下使用JavaScript判斷鼠標(biāo)滑輪是不是向上滾動(dòng),當(dāng)向上滾動(dòng)的時(shí)候,導(dǎo)航條浮動(dòng)在頂部位置。示例代碼如下。2016-07-07jquery中click等事件綁定及移除的幾種方法小結(jié)
這篇文章主要介紹了jquery中綁定事件與解綁事件是常用到的寫法,這里總結(jié)了幾種常見的綁定事件與解綁事件的方法,需要的朋友可以參考下2023-05-05