本文主要是介绍这里来讲解 3D云标签-酷炫的动画-工作原理与实现代码（令我想起了高中时候极不想看见的的sin,cos,tanS等高中数学），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script>
效果图：
工作原理（长话短说）：
1.先写一个div和自定义一些文字，颜色可以随机或者自定义几个，进行随机
2.利用js写一个自定义圆的大少活动范围，即利用好，高中数学里面的pai r 。圆的面积等于pai*r*r(pai同音词)
3.最后是动画，就是这些文字或者其他元素，想在自定义范围内展示一个什么样的动画效果。其实不一定要和他一致，发挥自己的创新是最好的。（这里的动画，是根据数学公式sin，cos等的运动轨迹动画来的。当鼠标在某个标签的4个方向内时，他会根据距离，方向，调用一个反方向的sin，cos之类的运动动画效果。值得学习的是，距离的远近会直接影响动画的速度，讲解完毕谢谢内心看完，欢迎交流互相学习）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D云标签</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#navg {
width:1240px;
margin:auto;
}
.tagBall {
width:500px;
height:500px;
position:absolute;
top:20px;
left:20px;
}
.tag {
display:block;
position:absolute;
left:0px;
top:0px;
color:#000;
text-decoration:none;
font-size:15px;
font-family:"微软雅黑";
font-weight:bold;
}
.tag:hover {
border:1px solid #666;
}
.form_vav td {
color:#a78b6f;
}
</style>
</head>
<body>
<div class="dadiv">
<div class="tagBall">
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">冯佳兴</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">佳人才子</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲 </a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
<a class="tag" href="###">温娉哲</a>
</div>
</div>
<script>
var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),
paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];
RADIUS = 220,
fallLength = 500,
tags = [],
angleX = Math.PI / 500,
angleY = Math.PI / 500,
CX = paper.offsetWidth / 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() {
setInterval(function() {
rotateX();
rotateY();
tags.forEach(function() {
this.move();
})
}, 17)
}
if ("addEventListener" in window) {
paper.addEventListener("mousemove", function(event) {
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);
this.ele.style.fontSize = 15 * scale + "px";
this.ele.style.opacity = alpha + 0.5;
this.ele.style.filter = "alpha(opacity = " + (alpha + 0.5) * 100 + ")";
this.ele.style.zIndex = parseInt(scale * 100);
this.ele.style.left = this.x + CX - this.ele.offsetWidth / 2 + "px";
this.ele.style.top = this.y + CY - this.ele.offsetHeight / 2 + "px";
}
}
innit();
animate();
</script>
</body>
</html>
js代码可直接运行，复制即可
欢迎交流，欢迎提供更高效的代码
这篇关于这里来讲解 3D云标签-酷炫的动画-工作原理与实现代码（令我想起了高中时候极不想看见的的sin,cos,tanS等高中数学）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
