HTML頁面中的HTML元素的圓形佈局

我想以的圓形方式來佈局元素列表。HTML頁面中的HTML元素的圓形佈局

所以我想知道是否有一個簡單的方法與HTML5/CSS3; 以及如果插件是jQuery/jQuery UI或任何其他JavaScript庫管理這種佈局。

在此先感謝您的幫助。

編輯：

截至目前我已經使用jQuery的Radmenu：http://www.tikku.com/jquery-radmenu-plugin; 但它的內部工作有點笨拙。

我可能會得到一個自定義解決方案，其靈感來源於dzejkej代碼示例。

來源

2011-12-08 Pragmateek

可能的重複？ http://stackoverflow.com/questions/8218124/how-to-position-elements-as-a-curve-with-jquery-each –

查看jCurvy - http://jcurvy.com/index.html –

http： //www.cssplay.co.uk/menus/cssplay-round-and-round.html#url –

簡單的純JavaScript例如如何將HTML成圓形佈局：

// retrieve the elements however you want (class name, tag name, ..) 
var elems = document.getElementsByTagName('div'); 
var increase = Math.PI * 2/elems.length; 
var x = 0, y = 0, angle = 0; 

for (var i = 0; i < elems.length; i++) { 
    elem = elems[i]; 
    // modify to change the radius and position of a circle 
    x = 100 * Math.cos(angle) + 200; 
    y = 100 * Math.sin(angle) + 200; 
    elem.style.position = 'absolute'; 
    elem.style.left = x + 'px'; 
    elem.style.top = y + 'px'; 
    angle += increase; 
}

HERE是工作代碼。

來源

2011-12-08 19:20:13 kubetz

謝謝，整潔，簡單;但它沒有考慮元素的大小。所以如果它們不是相同的大小，那麼佈局看起來就是橢圓形的。但是這應該是可用的，因爲我應該顯示圖像。 – Pragmateek

@Serious只是一個示例來演示如何實現圓形佈局。你沒有指定更多的細節:)。在計算'x'和'y'時，可以通過使用寬度和高度來修改它以考慮大小。 – kubetz

庫爾茨，請你解釋'var increase = Math.PI * 2/elems.length; '根據其邏輯含義？ – Starx

您可以使用RaphaelJS，使用jQuery或您喜歡的任何其他框架。

本演示將幫助您：http://raphaeljs.com/hand.html

window.onload = function() { 
    var r = Raphael("holder", 640, 480), angle = 0; 
     while (angle < 360) { 
      var color = Raphael.getColor(); 
      (function (t, c) { 
       r.circle(320, 450, 20).attr({stroke: c, fill: c, transform: t, "fill-opacity": .4}).click(function() { 
       s.animate({transform: t, stroke: c}, 2000, "bounce"); 
      }).mouseover(function() { 
       this.animate({"fill-opacity": .75}, 500); 
      }).mouseout(function() { 
       this.animate({"fill-opacity": .4}, 500); 
      }); 
     })("r" + angle + " 320 240", color); 
     angle += 30; 
    } 
    Raphael.getColor.reset(); 
    var s = r.set(); 
    s.push(r.path("M320,240c-50,100,50,110,0,190").attr({fill: "none", "stroke-width": 2})); 
    s.push(r.circle(320, 450, 20).attr({fill: "none", "stroke-width": 2})); 
    s.push(r.circle(320, 240, 5).attr({fill: "none", "stroke-width": 10})); 
    s.attr({stroke: Raphael.getColor()}); 
};

來源

2011-12-08 19:12:41

感謝加百利爲這個樣本;但AFAIK Raphael對於SVG操作非常有趣（甚至很棒）。在這裏，我的元素可能無關緊要，我不想用SVG hackeries來描述我的代碼。 – Pragmateek

HTML頁面中的HTML元素的圓形佈局

回答

相關問題