Bến/menu tròn trong css hoặc jquery

Question

Có thể có menu tròn hoặc đế bằng css hoặc jquery không?
Tôi có một tập hợp các hình ảnh như các mục dock cần được hiển thị như một dock tròn ... tuy nhiên số lượng các mục trong dock không liên tục và có thể khác nhau .... vì vậy tôi không thể sử dụng các giá trị không đổi để định vị từng mục theo cách được xác định trước. Ajax tải một số hình ảnh vào div đặc biệt này và tôi cần phải sử dụng css hoặc jquery để tạo kiểu này để chúng được hiển thị dưới dạng các mục dock tròn. Bất kỳ ý tưởng về cách này có thể được thực hiện ..?
Tôi muốn một trình duyệt trong cụ thể thực hiện, nhưng tôi cũng hoan nghênh nếu một số có một số giải pháp cụ thể để vài trình duyệt ...

CẬP NHẬT
Tôi không nghĩ rằng tôi chính xác muốn một menu bánh. .. nó dễ dàng bị rối tung vì số lượng các hạng mục dock tăng lên. Tôi đang tìm một bến tàu xoắn ốc. và bằng cách xoắn ốc i có nghĩa là các mục trình đơn phải nằm trong sự sắp xếp sau ..

Answer 1

Tôi hiểu rồi! Đây chỉ là một khái niệm cơ bản, vì vậy hãy tự tinh chỉnh nó.

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

Xem sau JSFiddle và mã dưới đây:

var items = 10; 
var a = 20; 
var b = 1; // updated an extra b, used for rate (see update section below) 
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size 
var centerY = $('.content').innerHeight()/2; 
for(var i = 0; i < items; i++) 
{ 
    var yPos = a * i * Math.cos(b*i) + centerY; 
    var xPos = a * i * Math.sin(b*i) + centerX; 
    var item = '<div class="item" style="top:' + yPos + 'px; left:' + xPos + 'px;" />'; 
    $('.content').append(item); 
} 

Và một số CSS cho mục đích thử nghiệm:

.item 
{ 
    width:10px; 
    height:10px; 
    position: absolute; 
    background-color:red; 
} 

.content 
{ 
    position:relative; 
    height:300px; 
    width:300px; 
    background-color:green; 
} 

<div class="content"> 
</div> 

Cập nhật: câu trả lời cho những nhận xét

Chức năng cho yPos và xPos đang tạo ra các mục ở bên ngoài, chúng bắt đầu từ điểm trung tâm. Bằng cách xác định a và thêm var b bên trong Math.cos(b*i). Có thể thay đổi tốc độ của các div hiển thị và sự lan truyền của tổng xoắn ốc. Sự lây lan của xoắn ốc được xác định bởi a, bởi vì nó xác định biên độ. Tỷ lệ divs được hiển thị được xác định bởi b mới.

Vì vậy, một nhỏ hơn b có nghĩa là góc thấp hơn, có nghĩa là gần nhau hơn trên xoắn ốc. Một nhỏ hơn a có nghĩa là biên độ thấp hơn, có nghĩa là gần nhau hơn trong trục x và y.

Nếu số lượng hình ảnh không thể dự đoán được, nó sẽ không thành vấn đề, bởi vì hình xoắn ốc bị lệch. Tất nhiên, điều này sẽ cung cấp cho bạn các vấn đề khi thêm quá nhiều.

Một giải pháp khác chỉ là làm điều này trong PHP, bởi vì nó không có gì để làm, vì vậy bạn đã có thể làm điều này trong backend của bạn. Có thể sẽ giống với forloop và tất cả, nhưng sau đó với các câu lệnh in trong PHP của bạn.

Answer 2

Mặc dù bạn chỉ định không muốn có một trình đơn bánh, có lẽ my code có thể được sử dụng (hoặc một trong các liên kết ban đầu). Vị trí của các mục được tính toán, vì vậy không cần phải lo lắng về việc thêm/xóa.

Answer 3

điều này có thể quan tâm không? http://www.wizzud.com/jqDock/

Answer 4

Tôi tin rằng bạn có thể sử dụng một cái gì đó giống như http://snipplr.com/view/43352/jquery-plugin-spiral-animations/

thử thay thế các chức năng Animate trong plugin với một
.css đơn giản ({ 'margin-left': x, 'margin-top': y })

hoạt động toán học đã có sẵn, bạn chỉ cần chuyển đổi animate ở vị trí tĩnh (đưa ra mức chênh lệch khác nhau cho mỗi mục trong menu)

Xin lỗi, tôi không có thời gian để viết mã, dễ làm hơn là giải thích: D