标签球

需要的插件：1 jquery  2  jquery.windstagball.js

步骤：

1、在这里，将下面代码，放到标签.js里，当做2使用。

/**
 * JQuery.windstagball.js
 * @de ion : 源码和创作思路来源于miaov,作者只是改良为Jquery插件，方便喜欢用jquery插件的人使用
 * @author : miaov winds
 * @url : http://www.miaov.com/ http://www.lijian.net/
 * @qq : 342377
 * @version :v1.0
 * @create :2012.05.04
 */
 (function($) {
    $.fn.windstagball = function(options) {


        var defaults = {
                radius: 120,
                size: 300,
                speed: 10,
                depth: 300,
                howElliptical: 1,
                fontsize: 12
            },
            param = $.extend({}, defaults, options || {}),
            selector = $(this).selector,
            warp = $(this),
            items = $(selector + \' a\'),
            dtr = Math.PI / 180,
            itemPosList = [],
            active = false,
            lasta = 1,
            lastb = 1,
            distr = true,
            mouseX = 0,
            mouseY = 0,
            sb, sa, sc, ca, cb, cc, oItem, oEvent, si;
        items.each(function() {
            oItem = {};
            oItem.width = $(this).width();
            oItem.height = $(this).height();
            itemPosList.push(oItem);
        });




        init();


        warp.mouseover(function() {
            active = true;
        });


        warp.mouseout(function() {
            active = false;
        });


        warp.mousemove(function(ev) {
            oEvent = window.event || ev;
            mouseX = oEvent.clientX - (warp.offset().left + warp.width() / 2);
            mouseY = oEvent.clientY - (warp.offset().top + warp.height() / 2);
            mouseX /= 5;
            mouseY /= 5;
        });


        setInterval(setPosition, 30);


        //初始化位置
        function init() {
            var phi = 0,
                theta = 0,
                max = itemPosList.length;
            sineCosine(0, 0, 0);
            //初始随机排序
            items.sort(function() {
                return Math.random() < 0.5 ? 1 : -1;
            });


            items.each(function(i) {
                if (distr) {
                    phi = Math.acos(-1 + (2 * i) / max);
                    theta = Math.sqrt(max * Math.PI) * phi;
                }
                else {
                    phi = Math.random() * (Math.PI);
                    theta = Math.random() * (2 * Math.PI);
                }
                itemPosList[i].cx = param.radius * Math.cos(theta) * Math.sin(phi);
                itemPosList[i].cy = param.radius * Math.sin(theta) * Math.sin(phi);
                itemPosList[i].cz = param.radius * Math.cos(phi);
                $(this).css(\'left\', itemPosList[i].cx + warp.width() / 2 - itemPosList[i].width / 2 + \'px\');
                $(this).css(\'top\', itemPosList[i].cy + warp.height() / 2 - itemPosList[i].height / 2 + \'px\');
            });
        };


        function sineCosine(a, b, c) {
            sa = Math.sin(a * dtr);
            ca = Math.cos(a * dtr);
            sb = Math.sin(b * dtr);
            cb = Math.cos(b * dtr);
            sc = Math.sin(c * dtr);
            cc = Math.cos(c * dtr);
        };


        function setPosition() {
            var a, b, c = 0, j, rx1, ry1, rz1, rx2, ry2, rz2, rx3, ry3, rz3, l = warp.width() / 2, t = warp.height() / 2;


            if (active) {
                a = (-Math.min(Math.max(-mouseY, -param.size), param.size) / param.radius) * param.speed;
                b = (Math.min(Math.max(-mouseX, -param.size), param.size) / param.radius) * param.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 (j = 0; j < itemPosList.length; j++) {
                rx1 = itemPosList[j].cx;
                ry1 = itemPosList[j].cy * ca + itemPosList[j].cz * (-sa);
                rz1 = itemPosList[j].cy * sa + itemPosList[j].cz * ca;


                rx2 = rx1 * cb + rz1 * sb;
                ry2 = ry1;
                rz2 = rx1 * (-sb) + rz1 * cb;


                rx3 = rx2 * cc + ry2 * (-sc);
                ry3 = rx2 * sc + ry2 * cc;
                rz3 = rz2;


                itemPosList[j].cx = rx3;
                itemPosList[j].cy = ry3;
                itemPosList[j].cz = rz3;


                per = param.depth / (param.depth + rz3);


                itemPosList[j].x = (param.howElliptical * rx3 * per) - (param.howElliptical * 2);
                itemPosList[j].y = ry3 * per;
                itemPosList[j].scale = per;
                itemPosList[j].alpha = per;


                itemPosList[j].alpha = (itemPosList[j].alpha - 0.6) * (10 / 6);
            }


            items.each(function(i) {
                $(this).css(\'left\', itemPosList[i].cx + l - itemPosList[i].width / 2 + \'px\');
                $(this).css(\'top\', itemPosList[i].cy + t - itemPosList[i].height / 2 + \'px\');


                $(this).css(\'font-size\', Math.ceil(param.fontsize * itemPosList[i].scale / 2) + 8 + \'px\');


                $(this).css(\'filter\', \"alpha(opacity=\" + 100 * itemPosList[i].alpha + \")\");
                $(this).css(\'opacity\', itemPosList[i].alpha);
                $(this).css(\"z-index\", i);
            });
        }
    };
})(jQuery);

2、html+css+js 

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < >css结合ng-class</ >
    <  rel=\"stylesheet\" href=\"http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css\">
    <  src=\"http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js\"></ >
    <  src=\"http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js\"></ >
    <  src=\"http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js\"></ >
    <  src=\"标签球.js\"></ >

    <style>
        #div1 {
            position: relative;
            width: 350px;
            height: 350px;
            border: 1px solid #000;
            margin: 20px auto 0;
        }

        #div1 a {
            position: absolute;
            top: 0px;
            left: 0px;
            font-family: Microsoft YaHei;
            color: #000;
            font-weight: bold;
            text-decoration: none;
            padding: 3px 6px;
        }

        #div1 a:hover {
            border: 1px solid #eee;
            background: #FFF;
        }

        #div1 .blue {
            color: #2bba8f;
        }

    </style>
</head>
<body ng-app=\"App\" ng-controller=\"myController\">
<div id=\"div1\">
    <a href=\"#\"  class=\"blue\" id=\"{{x.id}}\" ng-repeat=\"x in state\" ng-click=\"test(x.name,x.id)\"  >
        {{x.name}}
    </a>

     <!--不同样式-->
    <!--<a href=\"#\" >标签云</a>-->
    <!--<a href=\"#\" class=\"red\">PHP</a>-->
    <!--<a href=\"#\">Tab</a>-->
    <!--<a href=\"#\" class=\"blue\">流体布局</a>-->
    <!--<a href=\"#\">微博</a>-->
    <!--<a href=\"#\" class=\"green\">IPhone</a>-->
</div>


< >
    var App = angular.module(\'App\',[]);
    App.controller(\'myController\',[\'$scope\',function ($scope) {
        $scope.state=[
            {\'id\':1,\'name\':\'标签云\'},
            {\'id\':2,\'name\':\'PHP\'},
            {\'id\':3,\'name\':\'瀑布流\'},
            {\'id\':4,\'name\':\'Tab\'},
            {\'id\':5,\'name\':\'淘客\'},
            {\'id\':6,\'name\':\'蓝色经典\'},
            {\'id\':7,\'name\':\'IPhone\'},
            {\'id\':8,\'name\':\'微博\'},
        ]

        $(document).ready(function () {
            $(\"#div1\").windstagball({
                radius: 120,
                speed: 5
            });
        });
        $scope.test=function(name,index){
            console.log(\"+++++++你选中的值是\",name);
            let ele=document.getElementById(index);
            ele.style.color=\"#fff\";
            ele.style.background=\"#2bba8f\";
            // 点击一段时间后消去样式
            setTimeout(function () {
                ele.style.color=\"#2bba8f\";
                ele.style.background=\"#fff\";
            },2000)
        }


    }])
</ >
</body>
</html>

3、效果图