test-connection
/
标签云.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .tagBall {
            width: 500px;
            height: 500px;
            margin: 50px auto;
            position: relative;
        }
        .tag {
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
            color: #000;
            text-decoration: none;
            font-size: 15px;
            font-family: "微软雅黑";
            font-weight: bold;
        }
        .tag:hover {
            color: #66ccff !important;
            font-size: 36px !important;
        }
        body{
            background: #bbbbbb;
        }
    </style>
</head>
<body>
    <div class="tagBall">
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">猫叔</a>
        <a href=""class="tag">猫叔</a>
        <a href=""class="tag">猫叔</a>
        <a href=""class="tag">猫叔</a>
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">肥猫</a>
        <a href=""class="tag">小尾巴</a>
        <a href=""class="tag">小尾巴</a>
        <a href=""class="tag">小尾巴</a>
        <a href=""class="tag">小尾巴</a>
        <a href=""class="tag">小尾巴</a>
        <a href=""class="tag">小尾巴</a>
    </div>
    <script>
        var tagEle=document.querySelectorAll(".tag");
        var paper=document.querySelector(".tagBall");
        var Radius=200,fallLength=500,tags=[],angleX=Math.PI/500,angleY=Math.PI/500;
        var 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 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>