zoukankan      html  css  js  c++  java
  • TagCanvas

    http://www.goat1000.com/tagcanvas.php

    TagCanvas是一个基于HTML5 Canvas技术开发的标签云动画。

    还提供一个以jQuery插件形式实现的版本号。

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

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

    详细參数:

    Option Default Description
    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)


    demo:

    <!DOCTYPE html>
    <html>
      <head>
      	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>TagCanvas example</title>
        <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
        <script src="js/tagcanvas.min.js" type="text/javascript"></script>
        <script type="text/javascript">
    		window.onload = function() {
    			try {
    				TagCanvas.Start('myTag','tags',{
    				textColour: '#63cdff',
    				outlineColour: '#63cdff',
    				reverse: true,
    				depth: 0.8,
    				maxSpeed: 0.05
    				});
    			} catch(e) {
    				document.getElementById('myCloudTag').style.display = 'none';
    			}
    		};
    		function changeshape(s) {
    			var locks = { hcylinder: 'x', vcylinder: 'y', hring: 'x', vring: 'y', sphere: '' };
    			lock = locks[s] || '';
    			shape = s;
    			TagCanvas.initial = (lock == 'x' && [0,0.2]) || (lock == 'y' && [0.2,0]) || [0.2,0.2];
    			restart();
    		}
    		changeshape('vcylinder')
    
        </script>
      </head>
      <body style="background:#000">
        <div id="myCloudTag">
          <canvas width="600" height="350" id="myTag">
            <p>Anything in here will be replaced on browsers that support the canvas element</p>
          </canvas>
        </div>
        <div id="tags">
          <ul>
            <li><a href="#" style="font-size:30px;">认证考试</a></li>
            <li><a href="#">UMTS OMSTAR </a></li>
            <li><a href="#">客户经理角色认知</a></li>
            <li><a href="#">PM角色</a></li>
            <li><a href="#">维修</a></li>
            <li><a href="#">信息安全</a></li>
            <li><a href="#">UMTS OMSTAR </a></li>
            <li><a href="#">客户经理角色认知</a></li>
            <li><a href="#">PM角色</a></li>
            <li><a href="#">维修</a></li>
          </ul>
        </div>
      </body>
    </html>


  • 相关阅读:
    微信卡券领用中的问题
    abp的开发20180425
    typescript 接口的新认识
    Jquery构建Form表单Post提交数据的简单方法
    EF使用时异常:对一个或多个实体的验证失败。有关详细信息
    VS快捷键简单记录
    比较和排序 IComparable And IComparer
    wpf全局异常
    MailBee的简单使用
    json数据的获取(网络摘抄)
  • 原文地址:https://www.cnblogs.com/lytwajue/p/6872298.html
Copyright © 2011-2022 走看看