云标签 | 易学教程

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>
来源：https://www.cnblogs.com/beimingbingpo/p/9836218.html
标签
var
tag标签