分享一个由原生JS实现的球面展示效果，效果如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现球面展示特效</title>
<style>
body {
background-color: #000;
}
#box {
position: relative;
width: 450px;
height: 450px;
margin: 20px auto 0
}
#box a {
position: absolute;
top: 0px;
left: 0px;
font-family: Microsoft YaHei;
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 3px 6px
}
#box a:hover {
border: 1px solid #eee;
background: #000
}
#box .blue {
color: blue
}
#box .red {
color: red
}
#box .yellow {
color: yellow
}
</style>
</head>
<body>
<div id="box">
<a>JS课程</a>
<a class="red">教程</a>
<a>试听</a>
<a>精品</a>
<a class="blue">视频</a>
<a>SEO</a>
<a class="red">特效</a>
<a class="yellow">JavaScript</a>
<a>Baidu</a>
<a class="red">CSS</a>
<a>求职</a>
<a class="blue">书籍</a>
<a>继承</a>
<a class="red">课程</a>
<a class="blue">OOP</a>
<a>XHTML</a>
<a class="blue">setInterval</a>
<a>W3C</a>
<a>阿里</a>
<a class="yellow">代码</a>
<a>华为</a>
</div>
<script>
// 球的半径
var radius = 120;
// 角度弧度
var radian = Math.PI / 180;
// 标签信息
var objList = [];
// 鼠标激活
var active = false;
// 转动速度
var speed = 10;
// 鼠标位置
var mouseX = 0;
var mouseY = 0;
// 标签列表
var tagList = null;
// 外层容器
var box = null;
window.onload = function () {
box = document.getElementById('box');
tagList = box.getElementsByTagName('a');
for (var i = 0; i < tagList.length; i++) {
var tag = {};
tag.offsetWidth = tagList[i].offsetWidth;
tag.offsetHeight = tagList[i].offsetHeight;
objList.push(tag);
};
sineCosine(0, 0, 0);
positionAll();
box.onmouseover = function () {
active = true;
};
box.onmouseout = function () {
active = false;
};
box.onmousemove = function (ev) {
var myEvent = window.event || ev;
mouseX = myEvent.clientX - (box.offsetLeft + box.offsetWidth / 2);
mouseY = myEvent.clientY - (box.offsetTop + box.offsetHeight / 2);
mouseX /= 5;
mouseY /= 5;
};
setInterval(update, 30);
};
function update() {
var a;
var b;
var c = 0;
var lastA = 1;
var lastB = 1;
if (active) {
a = (-Math.min(Math.max(-mouseY, -250), 250) / radius) * speed;
b = (Math.min(Math.max(-mouseX, -250), 250) / radius) * speed;
} else {
a = lastA * 0.98;
b = lastB * 0.98;
};
lastA = a;
lastB = b;
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
return;
};
sineCosine(a, b, c);
for (var j = 0; j < objList.length; j++){
var x1 = objList[j].objX;
var y1 = objList[j].objY * cosA + objList[j].objZ * (-sinA);
var z1 = objList[j].objY * sinA + objList[j].objZ * cosA;
var x2 = x1 * cosB + z1 * sinB;
var y2 = y1;
var z2 = x1 * (-sinB) + z1 * cosB;
var x3 = x2 * cosC + y2 * (-sinC);
var y3 = x2 * sinC + y2 * cosC;
var z3 = z2;
objList[j].objX = x3;
objList[j].objY = y3;
objList[j].objZ = z3;
per = 300 / (300 + z3);
objList[j].x = ( x3 * per) - 2;
objList[j].y = y3 * per;
objList[j].scale = per;
objList[j].alpha = per;
objList[j].alpha = (objList[j].alpha - 0.6) * (10 / 6);
};
doPosition();
depthSort();
};
function depthSort() {
var array = [];
for (var i = 0; i < tagList.length; i++) {
array.push(tagList[i]);
};
array.sort(function (one, two) {
if (one.objZ > two.objZ) {
return -1;
} else if (one.objZ < two.objZ) {
return 1;
} else {
return 0;
}
});
for (i=0;i<array.length;i++) {
array[i].style.zIndex = i;
};
};
function positionAll() {
var value = 0;
var theta = 0;
var length = objList.length;
var array = [];
var fragment = document.createDocumentFragment();
for (var i = 0; i < tagList.length; i++) {
array.push(tagList[i]);
};
array.sort(function(){
return Math.random() < 0.5 ? 1 : -1;
});
for (var i = 0; i < array.length; i++) {
fragment.appendChild(array[i]);
};
box.appendChild(fragment);
for (var i = 1; i < length + 1; i++) {
value = Math.acos(-1 + (2 * i - 1) / length);
theta = Math.sqrt(length * Math.PI) * value;
objList[i-1].objX = radius * Math.cos(theta) * Math.sin(value);
objList[i-1].objY = radius * Math.sin(theta) * Math.sin(value);
objList[i-1].objZ = radius * Math.cos(value);
tagList[i-1].style.left = objList[i-1].objX + box.offsetWidth / 2 - objList[i-1].offsetWidth / 2 + 'px';
tagList[i-1].style.top = objList[i-1].objY + box.offsetHeight / 2 - objList[i-1].offsetHeight / 2 + 'px';
}
};
function doPosition() {
var left = box.offsetWidth / 2;
var top = box.offsetHeight / 2;
for (var i = 0; i < objList.length; i++) {
tagList[i].style.left = objList[i].objX + left - objList[i].offsetWidth / 2 + 'px';
tagList[i].style.top = objList[i].objY + top - objList[i].offsetHeight / 2 + 'px';
tagList[i].style.fontSize = Math.ceil(12 * objList[i].scale / 2) + 8 + 'px';
tagList[i].style.filter = "alpha(opacity=" + 100 * objList[i].alpha + ")";
tagList[i].style.opacity = objList[i].alpha;
}
};
function sineCosine(a, b, c) {
sinA = Math.sin(a * radian);
cosA = Math.cos(a * radian);
sinB = Math.sin(b * radian);
cosB = Math.cos(b * radian);
sinC = Math.sin(c * radian);
cosC = Math.cos(c * radian);
}
</script>
</body>
</html>