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