纯前端实现3D旋转动态词云

__不靠谱先生

已于 2022-07-19 17:49:45 修改

阅读量2.5k

点赞数

分类专栏：动态词云词云前端文章标签：动态词云 wordCloud 前端

于 2022-07-19 17:44:41 首次发布

本文链接：https://blog.csdn.net/weixin_43871703/article/details/125876842

版权

功能埋点：
1. 纯前端实现，（很简单，也能继续优化，变色等等)
2. 对数据格式没有要求
3. 每一项可点击，可做JS效果（搜索，跳转等）

先看词云效果（动态旋转）不是gif图，实际是3D自动旋转效果
在这里插入图片描述
上代码：
HTML

<body>
	// body 里面没有任何元素，元素在js里创建了一个div
	// 两个script标签，上面的是jq的插件库网上找个版本就好，下面是自己写的js，下面会贴出来。
	<script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/move.js"></script>
</body>

CSS

    body {
   
            background: #ffffff center 230px;
        }

        #div1 {
   
            position: relative;
            width: 600px;
            height: 600px;
            margin: 20px auto 0;
            border-radius: 10px;
            border:1px solid #ccc !important
        }

        #div1 a {
   
            position: absolute;
            top: 0px;
            left: 0px;
            font-family: Microsoft YaHei;
            color: #0b85ff;
            font-weight: bold;
            text-decoration: none;
            padding: 3px 6px;
        }

        #div1 a:hover {
   
            opacity: 1 !important;
        }

JS/ move.js

var radius = 180;//3D 球的半径   词分布的半径
var dtr = Math.PI / 180;
var d = 600;

var mcList = [];
var active = false;		// 默认让文字旋转
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 2;//文字移动速度
var size = 250;
var dataArr = ['苹果', '香蕉', '橘子', '桃子', '西瓜', '葡萄', '橙子', 'xx', 'bb', '苹果', '香蕉', '橘子', '桃子', '西瓜', '葡萄', '橙子', 'xx', 'bb',];

var mouseX = 0;
var mouseY = 0;

var howElliptical = 1;

var aA = null;
var oDiv = null;

function update() {
   
	var a;
	var b;

	if (active) {
   
		a = (-Math.min(Math.max(-mouseY, -size)<