tagcanvas标签云文字与图片示例代码

代码语言:html

所属分类:布局界面

代码描述:tagcanvas标签云文字与图片示例代码,包含多种形状,支持图片与文字标签云,支持多个标签云联动

代码标签: 文字 图片 示例

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TagCanvas - an HTML5 Canvas Tag Cloud</title>
 


    <style type="text/css">
        body{
              background: white;
          }
            #cparent {
             position: relative;
             width: 0;
             height: 0;
            }
            #cmsg {
             position: absolute;
             top: 20px;
             left: 10px;
             width: 160px;
             padding: 6px;
             border: 4px solid #aaa;
             background-color: #eee;
             text-align: center
            }
            #cmsg:hover { opacity: 0.5 }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tagcanvas.2.9.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        var oopts = {
         textFont: 'Impact,Arial Black,sans-serif',
         textHeight: 20,
         maxSpeed: 0.1,
         decel: 0.9,
         depth: 0.99,
         outlineColour: '#f6f',
         outlineThickness: 3,
         pulsateTo: 0.2,
         pulsateTime: 0.5,
         wheelZoom: false
        }, ttags = 'taglist', lock, shape = 'sphere';
        window.onload = function() {
         TagCanvas.textFont = 'Trebuchet MS, Helvetica, sans-serif';
         TagCanvas.textColour = '#00f';
         TagCanvas.textHeight = 25;
         TagCanvas.outlineMethod = 'block';
         TagCanvas.outlineColour = '#acf';
         TagCanvas.maxSpeed = 0.03;
         TagCanvas.minBrightness = 0.2;
         TagCanvas.depth = 0.92;
         TagCanvas.pulsateTo = 0.6;
         TagCanvas.initial = [0.1,-0.1];
         TagCanvas.decel = 0.98;
         TagCanvas.reverse = true;
         TagCanvas.hideTags = false;
         TagCanvas.shadow = '#ccf';
         TagCanvas.shadowBlur = 3;
         TagCanvas.weight = false;
         TagCanvas.imageScale = null;
         TagCanvas.fadeIn = 1000;
         TagCanvas.clickToFront = 600;
         try {
          TagCanvas.Start('tagcanvas','taglist');
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0