原生JS实现球面展示特效

分享一个由原生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>

原生JS实现球面展示特效相关推荐

原生JS实现影集展示特效
分享一个用原生JS实现的影集展示特效,效果如下: 实现的代码如下: <!doctype html> <html><head><meta charset=&qu ...
2021年原生JS实现影集展示特效
JS最全最好的免费教程放在,码蝗网, <!doctype html> <html><head><meta charset="utf-8"& ...
原生JS实现飘浮关键词特效
分享一个原生JS实现的飘浮关键词的效果,鼠标悬停可让关键词停止运动,点击关键词可跳转到对应的页面,效果如下: 实现的代码如下: <!DOCTYPE html> <html>&l ...
原生JS实现翻书特效
给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴. <!doctype html> <html><head><meta c ...
原生js开灯关灯特效
今天练习js写的开关灯特效老开心了老有成就感了嘻嘻嘻~~~ ps:白色效果不明显,我又改成粉色了 <!DOCTYPE html> <html lang="en&quo ...
原生js实现canvas粒子特效
要实现的效果当鼠标移入容器时,让鼠标作为中心点半径为80到圆内的粒子散开当粒子不在圆的范围后,粒子返回原来的位置主要代码创建初始位置 // NUM_PARTICLES是粒子总个数for ( i ...
如何用 CSS 和原生 JS 创作一个展示苹果设备的交互动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBKWdW 可交互视频 ...
button点击后出现的边框_代码分享：原生js实现，鼠标点击按钮时，多彩粒子散射特效。...
原地址,可以在线查看演示效果,要是下面的代码复制后运行有问题,可以从原地址去复制,我试过了,OK的. 原生js实现,鼠标点击按钮时,多彩粒子散射特效.fairysoftware.com 完整代码,复 ...
原生JS实现拖动拉开序幕特效
给大家分享一个用原生JS实现的拖动拉开序幕特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en" ...

原生JS实现球面展示特效

原生JS实现球面展示特效相关推荐

最新文章

热门文章