jquery實現tagcloud,帶3d效果。

2021-05-25 06:41:47 字數 668 閱讀 6334

寫網頁時可能遇到要將一堆東西列出來的情況,比如姓名啊,標籤啊等等~

如果僵硬的列出來感覺很彆扭,因為往往你要列出來的東西很多(直觀,明了),你又不想去寫另外乙個html。我就遇到了這樣的問題。

想想用滾動吧,滾動起來效果也不是很好。在高人指點下,了解到還有tagcloud(標籤雲)這類東西。網上一搜,發現標籤雲寫的漂亮的,那

真是華麗麗啊。

於是在網上找了份**,貼上位址吧

效果還是很不錯的,就是看起來有點晃眼睛

看看效果:

附帶點說明:

這種效果的實現主要是利用了三角函式,設定stepping,角度不同,則顯示出的效果不同(因為字型的大小和透明度都和角度有關)。

感覺這裡有一點不足之處,就是stepping的設定。設計的很巧妙(可以實現兩個方向的轉動),但感覺不夠精細。通過計算mousemove()

事件獲得的滑鼠座標與width/2的差來得到stepping,的確很好,但轉動時速度過快,效果就很差了。所以我在之後加上了一句,每次呼叫

render()時,stepping/=1.05;這樣會有些改進,但依舊效果不是太好。不知道是設計的問題還是**的問題。應該stepping再改進下,效果

會好些。以後再試試。

ps:標籤雲這東西看起來就有點犀利,而且有各種各樣的版本,看到過很牛的,計算起來實在麻煩。這個,還是值得研究的。

jQuery實現拖動

定位 給要拖動的物件設定乙個定位 position aboselute 座標 使用event.clientx event.clienty獲取滑鼠位置,使用obj.offset left obj.offset top獲取物件離瀏覽器左上角的座標 事件 mousedown,mouseup,mousemo...

簡單實現jQuery

jquery的本質是函式,下面來簡單實現一下jquery中的addclass和text window.jquery function if typeof nodeorselector string else if nodeorselector instanceof node else if node...

jQuery實現原理

本文講述的是怎樣在不使用js原生和jquery提供的api,實現和jquery一樣的效果。舉例 addclass 新增類名 複製 第一步 獲取物件 如果我們要給第二個li加類名 var litag document.queryselector ul li nth child 2 複製 第二步 給這個...