站长资源
标签云效果在某些场景下用到的概率还是很大的，花了半天自己写了一个，但是效果不太理想。网上搜了一下有大佬写好的标签云插件，不过有点不太符合我的逾期，然后稍微调整了一下。
首先我们准备引入插件
<script src="tagcloud.js" type="text/javascript" charset="utf-8"></script>
html部分很简单，定义一个盒子，并指定大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D标签云滚动显示，随机变换颜色</title>
<script src="tagcloud.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
#tagCloud{width: 500px;height: 300px;margin: 0 auto;margin-top: 10%;}
</style>
<body>
<div id="tagCloud">
</div>
</body>
</html>
JS部门调用及配置
// 定义颜色
var Colors = ['#21eff5','#8a00ff','#c4e15e','#e744ed','#0084ff','#00ffcc','#40efa7','#72e054','#f0d360','#c6a3ff','#00eaff','#6748ea','#59e2a9']
// 原始数据
var Data = [
{ label: '作风过于拘谨不够大胆'},
{ label: '联系不及时'},
{ label: '处置恰当'},
{ label: '调查取证'},
{ label: '处警不下车'},
{ label: '成绩进步大'},
{ label: '乐于助人'},
{ label: '办事效率高'},
{ label: '举止不当'},
{ label: '交通事故处理'},
{ label: '态度端正'},
{ label: '语气生硬'},
{ label: '推脱推诿'},
{ label: '警容风纪优'},
{ label: '业务知识扎实'},
{ label: '亲和力强'}
];
// 改造拿过来的数据（如果你返回的数据就是如下，也可以不用改造）
Data.forEach(item=>{
item.fontColor = Colors[parseInt(Math.random()*(Colors.length))] // 颜色随机
item.fontSize = parseInt(Math.random()*12+14) // 字体12-26随机
item.url = 'javascript:;' // 点击跳转的链接
item.target = '_self' // 跳转的方式
})
var Seting = {
entries: Data,//数据
width: '100%', //宽度
height: 300, // 高度
radius: '90%', // 圆角大小
bgDraw : false, // 是否显示背景
bgColor : "#000", // 背景颜色
speed: .2, // 速度
opacityOut : .3 // 透明度
};
new SVG3DTagCloud( document.getElementById( 'tagCloud' ), Seting );
// 插件并不依赖jquery，如需可以这样调用
//$( '#tagCloud').svg3DTagCloud( seting );
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D标签云滚动显示，随机变换颜色</title>
<script src="tagcloud.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
#tagCloud{width: 500px;height: 300px;margin: 0 auto;margin-top: 10%;}
</style>
<body>
<div id="tagCloud">
</div>
</body>
</html>
<script type="text/javascript">
// 定义颜色
var Colors = ['#21eff5','#8a00ff','#c4e15e','#e744ed','#0084ff','#00ffcc','#40efa7','#72e054','#f0d360','#c6a3ff','#00eaff','#6748ea','#59e2a9']
// 原始数据
var Data = [
{ label: '作风过于拘谨不够大胆'},
{ label: '联系不及时'},
{ label: '处置恰当'},
{ label: '调查取证'},
{ label: '处警不下车'},
{ label: '成绩进步大'},
{ label: '乐于助人'},
{ label: '办事效率高'},
{ label: '举止不当'},
{ label: '交通事故处理'},
{ label: '态度端正'},
{ label: '语气生硬'},
{ label: '推脱推诿'},
{ label: '警容风纪优'},
{ label: '业务知识扎实'},
{ label: '亲和力强'}
];
// 改造拿过来的数据（如果你返回的数据就是如下，也可以不用改造）
Data.forEach(item=>{
item.fontColor = Colors[parseInt(Math.random()*(Colors.length))] // 颜色随机
item.fontSize = parseInt(Math.random()*12+14) // 字体12-26随机
item.url = 'javascript:;' // 点击跳转的链接
item.target = '_self' // 跳转的方式
})
var Seting = {
entries: Data,//数据
width: '100%', //宽度
height: 300, // 高度
radius: '90%', // 圆角大小
bgDraw : false, // 是否显示背景
bgColor : "#000", // 背景颜色
speed: .2, // 速度
opacityOut : .3 // 透明度
};
new SVG3DTagCloud( document.getElementById( 'tagCloud' ), Seting );
//插件并不依赖jquery，如需可以这样调用
//$( '#tagCloud').svg3DTagCloud( seting );
</script>
具体效果可以点击下面的预览查看，希望可以帮助到大家
评论前必须登录！
注册