JQuery3D标签云效果插件tagcanvas

前端技术

2018-03-23

200

0

目录


最近想在博客中引入酷炫的3D标签云效果,找了很多插件,大多数都是需要收费才能下载。后来,看到jquery有一款开源的插件,叫做tagcanvas,非常好用,分享一下。

说明

其实最初看到这个插件是专门为workpress开发的插件,叫做cardoza-3d-tag-cloud,后来自己研究了下,发现可以单独使用,wordpress插件也是对tagcanvas做了一次封装。

除了支持文字标签外,该插件还支持图片和多种滚动效果,具体可以看官网的例子。

jquery地址:http://plugins.jquery.com/tagcanvas/

GitHub地址:https://github.com/goat1000/TagCanvas

官方地址:http://www.goat1000.com/tagcanvas.php

用法

引入jquery和tagcanvas的js文件:

	<script type="text/javascript" src="./public/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="./public/js/jquery.tagcanvas.min.js"></script>

启用插件的代码:

	<script type="text/javascript">
		$j = jQuery.noConflict();
		$j(document).ready(function() {
			if(!$j('#myCanvas').tagcanvas({
				textColour: '#000000',
				outlineColour: '#cccccc',
				reverse: true,
				depth: 0.8,
				textFont: null,
				weight: false,
				maxSpeed: 0.05
			},'tags')) {
				$j('#myCanvasContainer').hide();
			}
		});
	</script>

完整的demo代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<body>
	<div id="myCanvasContainer" style="background-color:#ccc;">
		<canvas width="200px;" height="200px;" id="myCanvas">
			<p>Anything in here will be replaced on browsers that support the canvas element</p>
		</canvas>
	</div>
	<div id="tags">
		<ul style="display:none;width:100%;height:auto;">
			<li><a href="#">大沙发沙发发送到</a></li>
			<li><a href="#">大沙发沙发发送到</a></li>
			<li><a href="#">大沙送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙发发送到</a></li>
			<li><a href="#">大沙发沙发发送到</a></li>
			<li><a href="#">大沙发发送到</a></li>
			<li><a href="#">大沙发沙发发送到</a></li>
			<li><a href="#">大沙发发送到</a></li>
			<li><a href="#">大沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙发沙发发送到</a></li>
			<li><a href="#">大沙送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙发发送到</a></li>
			<li><a href="#">大沙发沙发发送到</a></li>
			<li><a href="#">大沙沙发发送到</a></li>
			<li><a href="#">大沙发送到</a></li>
			<li><a href="#">大沙发送到</a></li>
			<li><a href="#">大沙发发送到</a></li>
			<li><a href="#">大沙发发送到</a></li>
		</ul>
	</div>

	<script type="text/javascript" src="./public/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="./public/js/jquery.tagcanvas.min.js"></script>
	<script type="text/javascript">
		$j = jQuery.noConflict();
		$j(document).ready(function() {
			if(!$j('#myCanvas').tagcanvas({
				textColour: '#000000',
				outlineColour: '#cccccc',
				reverse: true,
				depth: 0.8,
				textFont: null,
				weight: false,
				maxSpeed: 0.05
			},'tags')) {
				$j('#myCanvasContainer').hide();
			}
		});
	</script>
</body>
</html>

具体用法可以看官方的文档。

最后的效果如下:


前一篇:RabbitMQ基础(三)——fanout交换器和发布/订阅
后一篇:RabbitMQ基础(四)——direct交换器与路由

belonk

轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩