3d标签云效果
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2017-10-04 16:40:17
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
在网上找的代码但是在实际实用中遇到一些bug，自己修改啦下，原生js不依赖任何库
代码
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
.tagBall {
width: 400px;
height: 400px;
margin: 50px auto;
position: relative;
}
.tag {
display: block;
position: absolute;
left: 0px;
top: 0px;
color: #000;
text-decoration: none;
font-size: 15px;
font-family: "微软雅黑";
font-weight: bold;
will-change: transform;
}
.tag:hover {
border: 1px solid #666;
}
</style>
<title>3D标签云</title>
</head>
<body>
<div class="tagBall">
<a target="_blank" class="tag" title="Sublime" href="http://www.zhaokeli.com/tag/245.html">Sublime</a> <a target="_blank" class="tag" title="jquery插件" href="http://www.zhaokeli.com/tag/246.html">jquery插件</a> <a target="_blank" class="tag" title="css" href="http://www.zhaokeli.com/tag/204.html">css</a> <a target="_blank" class="tag" title="js特效" href="http://www.zhaokeli.com/tag/216.html">js特效</a> <a target="_blank" class="tag" title="正则" href="http://www.zhaokeli.com/tag/218.html">正则</a> <a target="_blank" class="tag" title="Android" href="http://www.zhaokeli.com/tag/219.html">Android</a> <a target="_blank" class="tag" title="eclipse" href="http://www.zhaokeli.com/tag/220.html">eclipse</a> <a target="_blank" class="tag" title="php报错" href="http://www.zhaokeli.com/tag/248.html">php报错</a> <a target="_blank" class="tag" title="PHP函数" href="http://www.zhaokeli.com/tag/224.html">PHP函数</a> <a target="_blank" class="tag" title="C++" href="http://www.zhaokeli.com/tag/226.html">C++</a> <a target="_blank" class="tag" title="ASP函数" href="http://www.zhaokeli.com/tag/234.html">ASP函数</a> <a target="_blank" class="tag" title="kindeditor" href="http://www.zhaokeli.com/tag/247.html">kindeditor</a> <a target="_blank" class="tag" title="伪静态" href="http://www.zhaokeli.com/tag/242.html">伪静态</a> <a target="_blank" class="tag" title="备案" href="http://www.zhaokeli.com/tag/249.html">备案</a> <a target="_blank" class="tag" title="js异常" href="http://www.zhaokeli.com/tag/251.html">js异常</a> <a target="_blank" class="tag" title="destoon" href="http://www.zhaokeli.com/tag/252.html">destoon</a> <a target="_blank" class="tag" title="duilib" href="http://www.zhaokeli.com/tag/253.html">duilib</a> <a target="_blank" class="tag" title="c++错 误" href="http://www.zhaokeli.com/tag/254.html">c++错 误</a> <a target="_blank" class="tag" title="boost" href="http://www.zhaokeli.com/tag/255.html">boost</a> <a target="_blank" class="tag" title="脚本" href="http://www.zhaokeli.com/tag/256.html">脚本</a> <a target="_blank" class="tag" title="canvas" href="http://www.zhaokeli.com/tag/257.html">canvas</a> <a target="_blank" class="tag" title="Apache" href="http://www.zhaokeli.com/tag/258.html">Apache</a> <a target="_blank" class="tag" title="js函数" href="http://www.zhaokeli.com/tag/259.html">js函数</a> <a target="_blank" class="tag" title="ecshop" href="http://www.zhaokeli.com/tag/260.html">ecshop</a> <a target="_blank" class="tag" title="GD" href="http://www.zhaokeli.com/tag/261.html">GD</a> <a target="_blank" class="tag" title="Thinkphp" href="http://www.zhaokeli.com/tag/262.html">Thinkphp</a> <a target="_blank" class="tag" title="Ubuntu" href="http://www.zhaokeli.com/tag/263.html">Ubuntu</a> <a target="_blank" class="tag" title="易语言" href="http://www.zhaokeli.com/tag/264.html">易语言</a> <a target="_blank" class="tag" title="nodejs" href="http://www.zhaokeli.com/tag/265.html">nodejs</a> <a target="_blank" class="tag" title="socket.io" href="http://www.zhaokeli.com/tag/266.html">socket.io</a> <a target="_blank" class="tag" title="谷歌扩展" href="http://www.zhaokeli.com/tag/267.html">谷歌扩展</a> <a target="_blank" class="tag" title="EJS模板" href="http://www.zhaokeli.com/tag/268.html">EJS模板</a> <a target="_blank" class="tag" title="Express" href="http://www.zhaokeli.com/tag/269.html">Express</a> <a target="_blank" class="tag" title="Linux命令" href="http://www.zhaokeli.com/tag/270.html">Linux命令</a> <a target="_blank" class="tag" title="Centos" href="http://www.zhaokeli.com/tag/271.html">Centos</a> <a target="_blank" class="tag" title="Python" href="http://www.zhaokeli.com/tag/272.html">Python</a> <a target="_blank" class="tag" title="PyQt5" href="http://www.zhaokeli.com/tag/273.html">PyQt5</a> <a target="_blank" class="tag" title="HTML5" href="http://www.zhaokeli.com/tag/274.html">HTML5</a> <a target="_blank" class="tag" title="Composer" href="http://www.zhaokeli.com/tag/275.html">Composer</a> <a target="_blank" class="tag" title="加密解密" href="http://www.zhaokeli.com/tag/276.html">加密解密</a> <a target="_blank" class="tag" title="LESS" href="http://www.zhaokeli.com/tag/277.html">LESS</a> <a target="_blank" class="tag" title="批处理(bat)" href="http://www.zhaokeli.com/tag/278.html">批处理(bat)</a> <a target="_blank" class="tag" title="网络安全" href="http://www.zhaokeli.com/tag/279.html">网络安全</a> <a target="_blank" class="tag" title="微信开发" href="http://www.zhaokeli.com/tag/280.html">微信开发</a> <a target="_blank" class="tag" title="Git" href="http://www.zhaokeli.com/tag/281.html">Git</a> <a target="_blank" class="tag" title="SVN" href="http://www.zhaokeli.com/tag/282.html">SVN</a> <a target="_blank" class="tag" title="SQL" href="http://www.zhaokeli.com/tag/283.html">SQL</a> <a target="_blank" class="tag" title="数据库" href="http://www.zhaokeli.com/tag/284.html">数据库</a> <a target="_blank" class="tag" title="服务器" href="http://www.zhaokeli.com/tag/285.html">服务器</a> <a target="_blank" class="tag" title="WPF" href="http://www.zhaokeli.com/tag/286.html">WPF</a> <a target="_blank" class="tag" title="编辑器" href="http://www.zhaokeli.com/tag/287.html">编辑器</a> <a target="_blank" class="tag" title="Canvas" href="http://www.zhaokeli.com/tag/1444.html">Canvas</a> <a target="_blank" class="tag" title="网络爬虫" href="http://www.zhaokeli.com/tag/1446.html">网络爬虫</a> <a target="_blank" class="tag" title="Scrapy" href="http://www.zhaokeli.com/tag/1447.html">Scrapy</a> <a target="_blank" class="tag" title="TP5" href="http://www.zhaokeli.com/tag/1448.html">TP5</a> <a target="_blank" class="tag" title="TypeScript" href="http://www.zhaokeli.com/tag/1449.html">TypeScript</a> <a target="_blank" class="tag" title="JS高级语法" href="http://www.zhaokeli.com/tag/1450.html">JS高级语法</a> <a target="_blank" class="tag" title="vmware" href="http://www.zhaokeli.com/tag/1451.html">vmware</a> <a target="_blank" class="tag" title="HACK" href="http://www.zhaokeli.com/tag/1452.html">HACK</a> <a target="_blank" class="tag" title="xss" href="http://www.zhaokeli.com/tag/1453.html">xss</a> <a target="_blank" class="tag" title="fiddler" href="http://www.zhaokeli.com/tag/1454.html">fiddler</a> <a target="_blank" class="tag" title="简洁" href="http://www.zhaokeli.com/tag/1455.html">简洁</a> <a target="_blank" class="tag" title="营销" href="http://www.zhaokeli.com/tag/1456.html">营销</a> <a target="_blank" class="tag" title="引流" href="http://www.zhaokeli.com/tag/1457.html">引流</a> <a target="_blank" class="tag" title="C#" href="http://www.zhaokeli.com/tag/1460.html">C#</a> <a target="_blank" class="tag" title="Win32Api" href="http://www.zhaokeli.com/tag/1461.html">Win32Api</a> <a target="_blank" class="tag" title="npm" href="http://www.zhaokeli.com/tag/1462.html">npm</a> <a target="_blank" class="tag" title="iis" href="http://www.zhaokeli.com/tag/1463.html">iis</a> <a target="_blank" class="tag" title="vbs" href="http://www.zhaokeli.com/tag/1464.html">vbs</a> <a target="_blank" class="tag" title="mysql" href="http://www.zhaokeli.com/tag/1465.html">mysql</a> <a target="_blank" class="tag" title="gulp" href="http://www.zhaokeli.com/tag/1466.html">gulp</a> <a target="_blank" class="tag" title="备份" href="http://www.zhaokeli.com/tag/1467.html">备份</a> <a target="_blank" class="tag" title="sass" href="http://www.zhaokeli.com/tag/1468.html">sass</a> <a target="_blank" class="tag" title="乱码" href="http://www.zhaokeli.com/tag/1469.html">乱码</a> <a target="_blank" class="tag" title="nginx" href="http://www.zhaokeli.com/tag/1470.html">nginx</a> <a target="_blank" class="tag" title="多线程" href="http://www.zhaokeli.com/tag/1471.html">多线程</a> <a target="_blank" class="tag" title="日期操作" href="http://www.zhaokeli.com/tag/1472.html">日期操作</a> <a target="_blank" class="tag" title="算法结构" href="http://www.zhaokeli.com/tag/1473.html">算法结构</a> <a target="_blank" class="tag" title="Win32" href="http://www.zhaokeli.com/tag/1474.html">Win32</a> <a target="_blank" class="tag" title="php扩展" href="http://www.zhaokeli.com/tag/1475.html">php扩展</a>
</div>
<script type="text/javascript">
;
(function(a) {
var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),
paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];
fallLength = paper.offsetWidth,
RADIUS = fallLength * 0.8 / 2,
tags = [],
angleX = Math.PI / fallLength,
angleY = Math.PI / fallLength,
CX = fallLength / 2,
CY = paper.offsetHeight / 2,
EX = paper.offsetLeft - document.body.scrollLeft - document.documentElement.scrollLeft,
EY = paper.offsetTop - document.body.scrollTop - document.documentElement.scrollTop;
function getClass(className) {
var ele = document.getElementsByTagName("*");
var classEle = [];
for (var i = 0; i < ele.length; i++) {
var cn = ele[i].className;
if (cn === className) {
classEle.push(ele[i]);
}
}
return classEle;
}
function innit() {
for (var i = 0; i < tagEle.length; i++) {
var a, b;
var k = -1 + (2 * (i + 1) - 1) / tagEle.length;
var a = Math.acos(k);
var b = a * Math.sqrt(tagEle.length * Math.PI);
var x = RADIUS * Math.sin(a) * Math.cos(b);
var y = RADIUS * Math.sin(a) * Math.sin(b);
var z = RADIUS * Math.cos(a);
var t = new tag(tagEle[i], x, y, z);
tagEle[i].style.color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
tags.push(t);
t.move();
}
}
Array.prototype.forEach = function(callback) {
for (var i = 0; i < this.length; i++) {
callback.call(this[i]);
}
}
function animate() {
rotateX();
rotateY();
tags.forEach(function() {
this.move();
});
requestAnimationFrame(animate);
}
if ("addEventListener" in window) {
paper.addEventListener("mousemove", function(event) {
//下面要再算一下如果滚动条有变动
EX = paper.offsetLeft - document.body.scrollLeft - document.documentElement.scrollLeft;
EY = paper.offsetTop - document.body.scrollTop - document.documentElement.scrollTop;
console.log(EX);
console.log(EY);
var x = event.clientX - EX - CX;
var y = event.clientY - EY - CY;
angleY = x * 0.0001;
angleX = y * 0.0001;
});
} else {
paper.attachEvent("onmousemove", function(event) {
var x = event.clientX - EX - CX;
var y = event.clientY - EY - CY;
angleY = x * 0.0001;
angleX = y * 0.0001;
});
}
function rotateX() {
var cos = Math.cos(angleX);
var sin = Math.sin(angleX);
tags.forEach(function() {
var y1 = this.y * cos - this.z * sin;
var z1 = this.z * cos + this.y * sin;
this.y = y1;
this.z = z1;
})
}
function rotateY() {
var cos = Math.cos(angleY);
var sin = Math.sin(angleY);
tags.forEach(function() {
var x1 = this.x * cos - this.z * sin;
var z1 = this.z * cos + this.x * sin;
this.x = x1;
this.z = z1;
})
}
var tag = function(ele, x, y, z) {
this.ele = ele;
this.x = x;
this.y = y;
this.z = z;
}
tag.prototype = {
move: function() {
var scale = fallLength / (fallLength - this.z);
var alpha = (this.z + RADIUS) / (2 * RADIUS);
var left = this.x + CX - this.ele.offsetWidth / 2 + "px";
var top = this.y + CY - this.ele.offsetHeight / 2 + "px";
var transform = 'translate(' + left + ', ' + top + ') scale(' + scale + ')';
this.ele.style.opacity = alpha + 0.5;
this.ele.style.zIndex = parseInt(scale * 100);
this.ele.style.transform = transform;
this.ele.style.webkitTransform = transform;
}
}
innit();
animate();
})(window);
</script>
</body>
</html>
