使用角模板和鏈接

Question

我是一個有角的寶寶，但我一直在閱讀本教程，以製作一些漂亮的導航按鈕。

​​

不過，我試圖找出最簡單，最有效的方法，使每圈有頂div中的個體獨特的聯繫。有什麼建議麼？

Answer 1

這是幾乎沒有用的東西。運行下面的代碼片段。

這不是有史以來最好的代碼，但也許它會提供一些靈感。我基本上推出了自己的平滑按鈕。這不是超級漂亮，可以使用很多工作，但我沒有時間:)我添加鏈接的方式是在mouseover和mouseout事件期間插入外來對象。

我很確定tween max庫也使用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>