jQuery 3D標簽云是一種流行的功能,用于在網頁上展示標簽云,甚至可以自定義標簽的大小、顏色、狀態等。平面的標簽云有時會顯得單調,而加上3D效果可以讓標簽更加引人注目。
<script src="jquery.min.js"></script> <script src="jquery.tagcloud.js"></script> <div class="tagcloud"> <a href="#" style="font-size:20px;color:#8db9e2;">JavaScript</a> <a href="#" style="font-size:10px;color:#8db9e2;">jQuery</a> <a href="#" style="font-size:30px;color:#8db9e2;">CSS</a> <a href="#" style="font-size:15px;color:#8db9e2;">HTML</a> </div> <script> $(function() { $('.tagcloud a').tagcloud({ size: { start: 14, end: 30, unit: 'px' }, color: { start: '#F00', end: '#00F' } }); }); </script>
在上面的代碼中,我們引用了兩個JavaScript文件,一個是jQuery本身,另一個是jquery.tagcloud.js,這個文件是用來實現標簽云的。然后,我們在HTML中創建了一個帶有class為tagcloud的div,里面放置了幾個標簽,標簽的大小和顏色是通過style屬性設置的。
接下來是JS代碼部分,我們使用jQuery選擇器選中了tagcloud中的所有a標簽,并使用tagcloud()方法進行初始化。在初始化時,我們傳入了若干參數,包括標簽大小的最小值、最大值和單位,以及顏色的起始顏色和結束顏色。調用tagcloud()方法后,jQuery會自動為標簽生成3D效果,讓標簽更加生動有趣。
上一篇jquery 3d輪播圖
下一篇jquery 3d相冊