在蓝色看到有需要标签云的球形效果,我记得之前在网上见到过,印象比较深刻,就找出地址发给他了,接下来却还有人需要这个效果的JQuery插件,网上好像也有,但是我看现在这个就不错,就想想自己改成jquery插件,方便喜欢使用jquery插件的人使用。
首先,说明下,这个tagcloud来源于妙味茶馆(http://www.miaov.com/),里面有很多效果的教程,tagcloud只是其中一个,全部是用原生Javascript实现的,他们的Demo地址:http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html,先感谢下他们的分享和教程。
接下来,看看此插件的效果图:
windstagball的Demo:
演示地址:http://www.lijian.net/p/windstagball/index.html
下载包:http://www.lijian.net/p/windstagball/windstagballv1.0.zip
使用方法很简单,引入jquery和jquery.windstagball.js,需要显示为标签的HTML如下:
注意,这里的div要设置CSS“position:relative;”,然后在页面实现:
当然,也可以使用参数,如下:
radius为标签云的半径,单位像素,speed则为运行速度,建议使用默认值10。
好了,再去看看你的页面,就有很炫的tagcloud效果了!
==========================================
大家可能都看到过Flash实现的标签云,很多网站都使用Flash构建的标签云,包括wordpress中都有相关的标签云插件。今天我们这里介绍一款jQuery开发的标签云插件:3D tag cloud,希望大家喜欢!
$('.tags').tagcloud();
演示中的代码如下:
$(function(){
$('#ts1').tagcloud({centrex:250, centrey:250, init_motion_x:10, init_motion_y:10});
});
<div id="ts1" style="width:500px; height:500px; background-color:#000;">
<ul>
<li><a href="http://www.gbin1.com/technology/html" style="color:#f00;" rel="20">HTML</a></li>
<li><a href="http://www.gbin1.com/technology/css" rel="15">CSS</a></li>
<li><a href="http://www.gbin1.com/technology/javascript" rel="10">Javascript</a></li>
<li><a href="http://www.gbin1.com/technology/jquery" rel="5">jQuery</a></li>
<li><a href="http://www.gbin1.com/technology/jquerynews" rel="1">jQuery plugin</a></li>
<li><a href="http://www.gbin1.com/technology/jquerytutorial" rel="5">jQuery tutorial</a></li>
<li><a href="http://www.gbin1.com/technology/jqueryhowto" rel="10">jQuery howto</a></li>
<li><a href="http://www.gbin1.com/technology/jqueryplugins" rel="15">jQuery plugins</a></li>
<li><a href="http://www.gbin1.com/technology/jquerymobile" style="color:#f00" rel="20">jQuery mobile</a></li>
<li><a href="http://www.gbin1.com/technology/javautilities" rel="15">java</a></li>
<li><a href="http://www.gbin1.com/technology/seo" rel="10">SEO</a></li>
<li><a href="http://www.gbin1.com/technology/onlinequiz" rel="5">Quiz</a></li>
<li><a href="http://www.gbin1.com/internet/news" rel="1">News</a></li>
<li><a href="http://www.gbin1.com/internet/people" rel="5">People</a></li>
<li><a href="http://www.gbin1.com/internet/mobile" rel="10">Mobile</a></li>
<li><a href="http://www.gbin1.com/tools/photoshop" rel="15">Photoshop</a></li>
<li><a href="http://www.gbin1.com/tools/design" style="color:#f00" rel="20">Design</a></li>
</ul>
</div>
是不是很简单?大家可以方便的添加标签云到网站上了!
======================================================================
===================================================
演示地址:http://www.lijian.net/p/windstagball/index.html
下载包:http://www.lijian.net/p/windstagball/windstagballv1.0.zip
使用方法很简单,引入jquery和jquery.windstagball.js,需要显示为标签的HTML如下:<divid="div">
<a href="#">标签云</a>
<a href="#" class="red">PHP</a>
<a href="#">瀑布流</a>
<a href="#">Tab</a>
<a href="#" class="blue">流体布局</a>
<a href="#">SEO</a>
<a href="#" class="red">彩蛋</a>
================================================
联系客服