• HTML5实现3D球效果

     效果图：

    1. DOCTYPE html>
    2. <html>
    3. <head>
    4. 	<meta name="format-detection" content="telephone=yes"/>
    5. 	<title>3d球型标签云title>
    6.  
    7. head>
    8. <style>
    9.     body {
    10.     	background: #000
    11.     }
    12.     #main {
    13.     	margin: 20px auto;
    14.     	width: 450px;
    15.     	height: 450px;
    16.     	border: 1px solid green;
    17.     	position: relative;
    18.     	z-index: 10;
    19.     }
    20.     #main a {
    21.     	position: absolute;
    22.     	left: 0;
    23.     	top: 0;
    24.     	font-size: 15px;
    25.     	font-weight: bolder;
    26.     	text-decoration: none;
    27.     	z-index: 9;
    28.     }
    29.     a:hover {
    30.     	transform: scale(2);
    31.     }
    32. 	.red {
    33. 		color: red;
    34. 	}
    35. 	.blue {
    36. 		color: blur;
    37. 	}
    38. 	.yellow {
    39. 		color: yellow;
    40. 	}
    41. style>
    42. <body>
    43. <div id="main"> 
    44. 	<a href="#">小仙女a> 
    45. 	<a href="#" class="red">苹果a> 
    46. 	<a href="#">香蕉a> 
    47. 	<a href="#">西瓜a> 
    48. 	<a href="#" class="blue">小仙女a> 
    49. 	<a href="#">SEOa> 
    50. 	<a href="#">小公主a> 
    51. 	<a href="#" class="yellow">梨a> 
    52. 	<a href="#">小泰迪a> 
    53. 	<a href="#" class="red">CSSa> 
    54. 	<a href="#">小猫咪a> 
    55. 	<a href="#" class="blue">Javaa> 
    56. 	<a href="#">小度熊a> 
    57. 	<a href="#">C#a> 
    58. 	<a href="#">语言类别a> 
    59. 	<a href="#" class="blue">西红柿a> 
    60. 	<a href="#">C++a> 
    61. 	<a href="#">Ca> 
    62. 	<a href="#">番茄a> 
    63. 	<a href="#">demoa>
    64. div> 
    65. body>
    66. html>
    67. <script type="text/javascript">
    68. document.getElementById('main').onclick=function() {
    69. 	window.location.hash = 'page';
    70. 	alert(11);
    71. }
    72.  
    73. // 1.计算所有的标签在球面上的坐标
    74. var main = document.getElementById('main');
    75. var tagElement = document.getElementsByTagName('a');
    76. var tagLength = tagElement.length;
    77. var offsetList = [];
    78. var radius = 120;
    79. var tspeed = 10; 
    80. var size = 250;
    81. var active = false;
    82. var d = 300;
    83. var lasta = 1; 
    84. var lastb = 1;
    85. var mouseX = 0; 
    86. var mouseY = 0; 
    87.  
    88.  
    89. // 2.计算所有元素的offsetWidth,offsetHeight值
    90. for (var i = 0; i < tagElement.length; i++) {
    91.     offsetList.push({
    92.     	offsetWidth: tagElement[i].offsetWidth,
    93.     	offsetHeight: tagElement[i].offsetHeight
    94.     });
    95. };
    96.  
    97. calcXYZ();
    98. // 鼠标移入事件
    99. main.onmouseover = function (){ 
    100. 	active = true; 
    101. }; 
    102. // 鼠标移出事件
    103. main.onmouseout = function () {
    104.     active = false;
    105.     // clearInterval(t);
    106. }; 
    107. main.onmousemove = function (event) {
    108. 	var e = window.event  || event; //兼容ie和其他浏览器的事件
    109. 	mouseX = (e.clientX - (main.offsetLeft + main.offsetWidth/2))/5;
    110.     mouseY = (e.clientY - (main.offsetTop + main.offsetHeight/2))/5;
    111. }
    112. var t = setInterval(update, 30);
    113.  
    114.  
    115.  
    116.  
    117. // 设置元素在球形坐标系的位置
    118. function calcXYZ() {
    119. 	// var radomθ,radomΦ;
    120. 	for (var i = 0; i < tagElement.length; i++) {
    121. 		var radomθ = Math.acos(-1 + (2 * i)/tagLength); //θ = arccos(((2 * num)-1)/all - 1);
    122. 		var radomΦ = Math.sqrt(tagLength * Math.PI) * radomθ; //Φ = θ*sqrt(all * π);
    123. 		//x,y,z坐标的计算公式 x=r*sinθ*cosΦ   y=r*sinθ*sinΦ   z=r*cosθ;
    124. 		var x = radius * Math.sin(radomθ) * Math.cos(radomΦ);
    125. 		var y = radius * Math.sin(radomθ) * Math.sin(radomΦ);
    126. 		var z = radius * Math.cos(radomθ);
    127. 		offsetList[i].x = x;
    128. 		offsetList[i].y = y;
    129. 		offsetList[i].z = z;
    130. 		// 设置元素的位置
    131. 		tagElement[i].style.left = x + main.offsetWidth/2 - offsetList[i].offsetWidth/2 + 'px';
    132. 		tagElement[i].style.top = y + main.offsetHeight/2 - offsetList[i].offsetHeight/2 + 'px';
    133. 	}
    134. }
    135.  
    136. // 计算中心点的sin,cos值
    137. function sineCosine( a, b, c) {
    138.     sa = Math.sin(a * (Math.PI/180));
    139.     ca = Math.cos(a * (Math.PI/180)); 
    140.     sb = Math.sin(b * (Math.PI/180));
    141.     cb = Math.cos(b * (Math.PI/180));
    142.     sc = Math.sin(c * (Math.PI/180));
    143.     cc = Math.cos(c * (Math.PI/180));
    144. }
    145.  
    146. // 球运动算法
    147. function update() {
    148.     var a, b; 
    149.     if(active) { 
    150. 	    a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed; 
    151. 	    b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed; 
    152. 	} 
    153. 	else 
    154. 	{ 
    155. 	    a = lasta * 0.98;
    156. 	    b = lastb * 0.98;
    157. 	} 
    158.  
    159.     lasta = a;
    160.     lastb = b;
    161.  
    162. 	if(Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
    163. 	    return;
    164. 	} 
    165.  
    166.     var c = 0;
    167.     sineCosine(a,b,c);
    168.     // 计算球旋转后的坐标
    169.     for(var j = 0; j < tagLength; j++) {
    170. 		var rx1 = offsetList[j].x;
    171. 		var ry1 = offsetList[j].y * ca + offsetList[j].z * (-sa);
    172. 		var rz1 = offsetList[j].y * sa + offsetList[j].z * ca;
    173.  
    174. 		var rx2 = rx1 * cb + rz1 * sb; 
    175. 		var ry2 = ry1; 
    176. 		var rz2 = rx1 * (-sb) + rz1 * cb;
    177.  
    178. 		var rx3 = rx2 * cc + ry2 * (-sc);
    179. 		var ry3 = rx2 * sc + ry2 * cc;
    180. 		var rz3 = rz2;
    181.  
    182. 		offsetList[j].x = rx3;
    183. 		offsetList[j].y = ry3;
    184. 		offsetList[j].z = rz3;
    185.  
    186. 		per = d / (d + rz3);
    187.  
    188. 		// offsetList[j].x=(howElliptical*rx3*per)-(howElliptical*2); 
    189. 		// offsetList[j].y=ry3*per; 
    190. 		// offsetList[j].scale=per; 
    191. 		offsetList[j].alpha = per;
    192.  
    193. 		offsetList[j].alpha=(offsetList[j].alpha - 0.6)*(10/6); 
    194. 	} 
    195.     doPosition();
    196. // depthSort(); 
    197. }
    198.  
    199.  
    200. function doPosition() {
    201. 	// console.log(11);
    202.     var l = main.offsetWidth/2;
    203.     var t = main.offsetHeight/2;
    204.     for(var i = 0; i < tagLength; i++) {
    205.         tagElement[i].style.left = offsetList[i].x + l - offsetList[i].offsetWidth/2 + 'px';
    206.         tagElement[i].style.top = offsetList[i].y + t - offsetList[i].offsetHeight/2 + 'px';
    207.         // console.log(tagElement[i].style.left, tagElement[i].style.top)
    208.         // tagElement[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
    209.  
    210.         // tagElement[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
    211.         tagElement[i].style.opacity = offsetList[i].alpha;
    212.     }
    213. } 
    214. script>

  • 相关阅读:
    字节对齐（C++，C#）
    大数据开发是做什么的？怎样入门？
    Web服务器简介及HTTP协议
    【java学习—十四】java动态代理（6）
    【Git】Gui图形化管理、SSH协议私库集成IDEA使用
    Spring
    IgH详解十四、igh添加总线链路状态监测功能
    C语言典范编程
    【INTEL（ALTERA）】Nios II软件开发人员手册中设计位置的错误示例
    第八章——权限管理与备份
  • 原文地址：https://blog.csdn.net/m0_56416159/article/details/140276689