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

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

先看词云效果(动态旋转)不是gif图,实际是3D自动旋转效果
纯前端实现3D旋转动态词云_第1张图片
上代码:
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)<

你可能感兴趣的:(动态词云,词云,前端,动态词云,wordCloud,前端)