Question

我有点角宝宝，但我一直在阅读本教程，制作一些漂亮的导航按钮。

http://onehungrymind.com/build-super-smooth-rollover-angularjs-greensock-timelinelite/

但是，我试图找出最简单，最有效的方法，让每个圈子在顶部div中都有一个独特的链接。有什么建议吗？

Answer 1

这里的东西几乎无法运作。运行下面的代码段。

这不是有史以来最好的代码，但也许它会提供一些灵感。我基本上把自己的光滑按钮推到了一边。它不是非常漂亮，可以使用很多工作，但我没时间:)我添加链接的方式是在mouseover和mouseout事件期间插入外来对象。

我很确定补间最大库也使用了svg。

无论如何，也许你可以从中汲取灵感。如果这是浪费空间，请告诉我，我会删除它。

var app = angular.module("testApp", []);

app.directive('smoothButton', function () {
    var linker = function (scope, element, attrs) {
        var colors = ["red", "green", "yellow", "blue"]
        var circles = [];
        var links = [];
        var speed = 1; //ms
        var size = 45;
        var x = 150;
        var y = 150;

        for (var i = 3; i >= 0; i--) {
            addCircle(element, x, y, size, i);
        }

        var grow = function (size, finalSize, idx) {
            var interval = setInterval(function () {
                var circle = circles[idx];

                if (size >= finalSize) {
                    clearInterval(interval);
                    addLink(element,
                    x - 20,
                    180 - (finalSize * 1.5));

                }
                size += 1;
                circle.setAttribute("r", size);

            }, speed);
        }

        var shrink = function (size, finalSize, idx) {
            var interval = setInterval(function () {
                var circle = circles[idx];

                if (size <= finalSize) {
                    clearInterval(interval);
                    for (link in links) {
                        if (links[link].parentNode) links[link].parentNode.removeChild(links[link]);
                    }

                }
                size -= 1;
                circle.setAttribute("r", size);

            }, speed);
        }

            function getFinalSize(size, idx) {
                var result = size;
                return result + (result * (Math.log(Math.abs(idx - 3) + 1.2)));
            }

            function addCircle(element, x, y, size, i) {
                var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                circle.setAttribute("cx", x);
                circle.setAttribute("cy", y);
                circle.setAttribute("r", size);
                circle.setAttribute("fill", colors[i]);

                element.parent().append(circle);

                if (i == 0) {
                    circle.addEventListener("mouseover", function () {
                        for (var j = 0; j < 3; j++) {
                            grow(size, getFinalSize(size, j), j);
                        }
                    });

                }
                //last circle only
                if (i == 3) {
                    circle.addEventListener("mouseout", function () {
                        for (var j = 0; j < 3; j++) {
                            shrink(getFinalSize(size, j), size, j);
                        }
                    });
                }
                circles.push(circle);
            }


            function addLink(element, x, y) {

                var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
                fo.setAttribute("width", "50");
                fo.setAttribute("height", "50");
                fo.setAttribute("x", x);
                fo.setAttribute("y", y);

                var body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
                body.innerHTML = "<a href='#' style='background:white;font-size:25px;'> test </a>";

                fo.appendChild(body);
                element.parent().append(fo);
                links.push(fo);

            }
    }

    return {
        link: linker,
        restrict: 'E'
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
    <svg width="100%" height="100%" viewBox="0 0 1000 300">
        <smooth-button></smooth-button>
    </svg>
</div>

使用角度模板和链接

1 个答案: