zoukankan      html  css  js  c++  java
  • 分享一个jQuery的标签云插件:3D tag cloud

    日期:2011/12/05  来源:GBin1.com

    大家可能都看到过Flash实现的标签云,很多网站都使用Flash构建的标签云,包括wordpress中都有相关的标签云插件。今天我们这里介绍一款jQuery开发的标签云插件:3D tag cloud,希望大家喜欢!

    分享一个jQuery的标签云插件:3D tag cloud

    在线演示   在线下载

    相关选项

    • zoom: 90 初始的缩放度
    • min_zoom: 25
    • max_zoom: 120
    • zoom_factor: 2 - 鼠标滚轮的缩放速度
    • rotate_factor: -0.45 - 鼠标移动时球体旋转的数量。正数将反向旋转
    • fps: 10 - 定义每秒动画更新的次数
    • centrex: 250 - 在container div中水平方向旋转中心
    • centrey: 250 在container div中垂直方向旋转中心
    • min_font_size: 12
    • max_font_size: 32
    • font_units: 'px'
    • random_points: 50 - 添加一些随机的点到球体来提高效果
    • foreground_colour: #fff - 接受的格式为: #333 #0A0A0A 和 rgb(n,n,n)
    • background_colour: rgb(0,0,0) - 不能使用颜色名字

    Javascript代码:

    $('.tags').tagcloud();


    演示中的代码如下:

    $(function(){
    $('#ts1').tagcloud({centrex:250, centrey:250, init_motion_x:10, init_motion_y:10});
    });


    HTML标签:

    <div id="ts1" style="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>

    是不是很简单?大家可以方便的添加标签云到网站上了!

    原文来源: 分享一个jQuery的标签云插件:3D tag cloud

  • 相关阅读:
    Caused by: java.lang.ClassNotFoundException: org.dom4j.DocumentException
    Android-Launcher开发之ShortCut(1)
    墨菲定律、二八法则、马太效应、手表定理、“不值得”定律、彼得原理、零和游戏、华盛顿合作规律、酒与污水定律、水桶定律、蘑菇管理原理、钱的问题、奥卡姆剃刀等13条是左右人生的金科玉律
    Java利用jcifs集成AD域用户认证
    Python_生成測试数据
    怎样设计接口?
    一道关于CSS选择器优先级的题
    hibernate的orphanRemoval
    js实现表格配对小游戏
    amazeui中内置的web组件有哪些且如何用
  • 原文地址:https://www.cnblogs.com/gbin1/p/2277337.html
Copyright © 2011-2022 走看看