zoukankan      html  css  js  c++  java
  • TagCanvas 插件

    TagCanvas是一个基于HTML5 Canvas技术开发的标签云动画。还提供一个以jQuery插件形式实现的版本。

    它支持文本和图片两种格式,能够以Sphere, hcylinder 或 vcylinder三种形状显示。

    TagCanvas还支持IE浏览器(利用ExplorerCanvas实现)。

    实例如下:

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title>TagCanvas example</title>
     5     <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
     6     <script src="tagcanvas.min.js" type="text/javascript"></script>
     7     <script type="text/javascript">
     8       window.onload = function() {
     9         try {
    10           TagCanvas.Start('myCanvas','tags',{
    11             textColour: '#ff0000',
    12             outlineColour: '#ff00ff',
    13             reverse: true,
    14             depth: 0.8,
    15             maxSpeed: 0.05
    16           });
    17         } catch(e) {
    18           // something went wrong, hide the canvas container
    19           document.getElementById('myCanvasContainer').style.display = 'none';
    20         }
    21       };
    22     </script>
    23   </head>
    24   <body>
    25     <h1>TagCanvas example page</h1>
    26     <div id="myCanvasContainer">
    27       <canvas width="300" height="300" id="myCanvas">
    28         <p>Anything in here will be replaced on browsers that support the canvas element</p>
    29       </canvas>
    30     </div>
    31     <div id="tags">
    32       <ul>
    33         <li><a href="http://www.google.com" target="_blank">Google</a></li>
    34         <li><a href="/fish">Fish</a></li>
    35         <li><a href="/chips">Chips</a></li>
    36         <li><a href="/salt">Salt</a></li>
    37         <li><a href="/vinegar">Vinegar</a></li>
    38       </ul>
    39     </div>
    40   </body>
    41 </html>

    具体参数:

    OptionDefaultDescription
    interval 20 Interval between animation frames, in milliseconds
    maxSpeed 0.05 Maximum speed of rotation
    minSpeed 0.0 Minimum speed of rotation when mouse leaves canvas
    decel 0.95 Deceleration rate when mouse leaves canvas
    minBrightness 0.1 Brightness of tags at farthest point (0.0-1.0)
    textColour "#ff99ff" Colour of the tag text
    textHeight 15 Height of the tag text font (in pixels)
    textFont "Helvetica, Arial,
    sans-serif"
    Font family for the tag text
    outlineColour "#ffff99" Colour of the box around the active tag
    outlineThickness 2 Thickness of outline in pixels
    outlineOffset 5 Distance of outline from text, in pixels
    pulsateTo 1.0 Pulsate outline to this opacity (0.0-1.0)
    pulsateTime 3 Pulse rate, in seconds per beat
    depth 0.5 Controls the perspective (0.0-1.0)
    initial null Initial rotation, with horizontal and vertical as an array, e.g. [0.8,-0.3]. Values are multiplied by maxSpeed.
    freezeActive false Set to true to pause movement when a tag is highlighted.
    frontSelect false Set to true to prevent selection of tags at back of cloud.
    txtOpt true Text optimisation, converts text tags to images for better performance.
    txtScale 2 Scaling factor of text when converting to image in txtOpt mode.
    reverse false Set to true to reverse direction of movement relative to mouse position.
    hideTags false Set to true to automatically hide the tag list element if TagCanvas is started successfully.
    zoom 1.0 Adjusts the relative size of the tag cloud in the canvas. Larger values will zoom into the cloud, smaller values will zoom out.
    wheelZoom true Enables zooming the cloud in and out using the mouse wheel or scroll gesture.
    zoomStep 0.05 The amount that the zoom is changed by with each movement of the mouse wheel.
    zoomMax 3.0 Maximum zoom value.
    zoomMin 0.3 Minimum zoom value.
    shadow "#000000" Colour of the shadow behind each tag.
    shadowBlur 0 Amount of tag shadow blurring, in pixels.
    shadowOffset [0,0] X and Y offset of the tag shadow, in pixels.
    weight false Set to true to turn on weighting of tags.
    weightMode "size" Method to use for displaying tag weights. Should be one of size, colour or both.
    weightSize 1.0 Multiplier for adjusting the size of tags when using a weight mode of size or both.
    weightGradient {0:'#f00', 0.33:'#ff0',
    0.66:'#0f0', 1:'#00f'}
    The colour gradient used for colouring tags when using a weight mode of colour or both.
    weightFrom null The link attribute to take the tag weight from. The default of null means that the weight is taken from the calculated link font size.
    shape "sphere" The shape of the cloud. Currently supported are sphere, hcylinder for a cylinder that starts off horizontal and vcylinder for a cylinder that starts off vertical.
    lock null A value of "x" limits rotation of the cloud to the (horizontal) x-axis, and a value of "y" limits rotation to the (vertical) y-axis. (These are strings, so the quotes are required)
  • 相关阅读:
    Terminologies in MVC: Part 2 (Razor Engine Syntax vs Web Form)
    what is diff. b/w app state & session state
    ASP.NET Web Pages (Razor) FAQ
    _AppStart.cshtml 和 _PageStart.cshtml的妙用
    系统编程--信号
    系统编程--进程间通信
    系统编程--进程
    系统编程--标准IO
    系统编程--文件IO
    网络--路由表&IP选路
  • 原文地址:https://www.cnblogs.com/joyco773/p/9013827.html
Copyright © 2011-2022 走看看