tagcloud.js 实现3d 云标签

未来编码师

已于 2024-09-25 22:38:08 修改

阅读量525

点赞数 8

分类专栏：前端文章标签： javascript 前端

于 2024-09-25 21:55:11 首次发布

本文链接：https://blog.csdn.net/m0_48847853/article/details/142469716

版权

前端专栏收录该内容

2 篇文章

订阅专栏

我这个布局是准备在中间放一张图片，两边的便签在图片的左右两边区域动。

中间图片自己放，每个标签鼠标放上去会放大并停止。效果如下：

3d云标签

注意：标签样式可以自行修改，tagcloud参数配置中，如果有的标签在区域内边界会被遮住，就通过radius和direction调节即可。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>3d云标签</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<script type="text/javascript" src="js/tagcloud.js"></script>
	</head>
	<body>
		<div class="dynamicBox">
			<div class="leftTag">
				<div class="tagcloud fl tagcloudOne" style="visibility: visible; position: relative;">
					<a href="#">喜出望外</a>
					<a href="#">欣喜若狂、皆大欢喜</a>
					<a href="#">喜气洋洋</a>
					<a href="#">笑逐颜开、心花怒放</a>
					<a href="#">眉飞色舞</a>
					<a href="#">眉开眼笑</a>
					<a href="#">手舞足蹈</a>
					<a href="#">喜上眉梢</a>
					<a href="#">心满意足</a>
				</div>
			</div>
			<div class="midPic">
			     <img src="./img/td.png" alt="">

			</div>
			<div class="rightTag">
				<div class="tagcloud fr tagcloudTwo"
					style="visibility: visible; position: relative; min-height: 240px; min-width: 500px;">
					<a href="#">心旷神怡</a>
					<a href="#">欢天喜地</a>
					<a href="#">怡然自得</a>
					<a href="#">神采飞扬</a>
					<a href="#">扬眉吐气</a>
					<a href="#">欢呼雀跃</a>
					<a href="#">抚掌大笑</a>
					<a href="#">兴高采烈</a>
					<a href="#">喜形于色</a>
				</div>
			</div>
		</div>
		<script>
			/*3D标签云*/
			tagcloud({
				selector: ".tagcloud", //元素选择器
				fontsize: 17, //基本字体大小, 单位px
				radius: 135, //滚动半径, 单位px
				mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast
				ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
				direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
				keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
			});
		</script>
	</body>
</html>

2.index.css


.dynamicBox{
	position: relative;
	width: 100%;
	height: 550px;
	display: flex;
	justify-content: space-between;
	margin-top:20px;
}
/* 3d动画 */
 .tagcloud { position: relative; margin-top:-150px; }
.tagcloud a{ position: absolute;  top: 0; left: 0;  display: block; padding: 6px 10px; color: #577BA4; font-size: 14px; border-radius: 18px; background: linear-gradient(90deg,#C1D7F1,#E9F1F8); text-decoration: none; white-space: nowrap;
  -o-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
  -ms-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
  -moz-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
  -webkit-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
  box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";/*兼容ie7/8*/
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);
  /*strength是阴影大小，direction是阴影方位，单位为度，可以为负数，color是阴影颜色 （尽量使用数字）使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示（block或inline-block;）*/
}
.tagcloud a{
	height: 50px;
	line-height: 50px;
	border-radius: 8px;
}
.tagcloud a:hover{ color: #3385cf; }
.rightTag,.leftTag{
	width: 65%;
	height: 100%;
	overflow:hidden;
	position: relative;
}
.rightTag{
	right: 65px;
}
.leftTag{
	left: 65px;
}
.tagcloudOne{
	min-height:  100%!important;
	    min-width: 100%!important;
	margin-left: -60px;
	top: 112px;
}
.tagcloudTwo{
	min-height:  100%!important;
	    min-width: 100%!important;
	top: 112px;
}