云标签
http://www.cnblogs.com/zhongxinWang/p/9378429.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js 3d云标签-jq22.com</title> <script src="http://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="#">3D标签云</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>
