站长资源
中国站长网站

原生3D标签云滚动显示,自定义随机变换颜色

原生3D标签云滚动显示,自定义随机变换颜色

标签云效果在某些场景下用到的概率还是很大的,花了半天自己写了一个,但是效果不太理想。网上搜了一下有大佬写好的标签云插件,不过有点不太符合我的逾期,然后稍微调整了一下。

首先我们准备引入插件

<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>

具体效果可以点击下面的预览查看,希望可以帮助到大家


免费下载  在线演示  
×

站长资源极速下载通道: 原生3D标签云滚动显示,自定义随机变换颜色

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 原生3D标签云滚动显示,自定义随机变换颜色

评论 抢沙发

评论前必须登录!