是否可以使用css或
jquery进行循环菜单或停靠.
我有一组图像作为码头项目需要显示为圆形码头…但是码头中的项目数量不是常数,可能会有所不同….所以我不能倾向于使用常量值进行定位每个项目以预定义的方式. Ajax将一些图像加载到这个特定的div中,我需要使用css或jquery来设置它的样式,以便它们显示为圆形停靠项.关于如何实现这一点的任何想法..？
我想要一个浏览器特定的实现,但我也欢迎,如果有人有一些特定于少数浏览器的解决方案…
我有一组图像作为码头项目需要显示为圆形码头…但是码头中的项目数量不是常数,可能会有所不同….所以我不能倾向于使用常量值进行定位每个项目以预定义的方式. Ajax将一些图像加载到这个特定的div中,我需要使用css或jquery来设置它的样式,以便它们显示为圆形停靠项.关于如何实现这一点的任何想法..？
我想要一个浏览器特定的实现,但我也欢迎,如果有人有一些特定于少数浏览器的解决方案…
UPDATE
我不认为我确实想要一个馅饼菜单…随着停靠项目数量的增加,它很容易搞砸.我正在寻找一个螺旋码头.
通过螺旋我的意思是菜单项必须在以下对齐..
解决方法
我觉得我明白了！这只是一个基本概念,所以请自己调整一下.
http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations
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);
}
还有一些CSS用于测试目的：
.item
{
width:10px;
height:10px;
position: absolute;
background-color:red;
}
.content
{
position:relative;
height:300px;
width:300px;
background-color:green;
}
<div class="content">
</div>
更新：回答评论
yPos和xPos的功能是向外部生成项目,它们从中心点开始.通过在Math.cos(b * i)中定义不同的a和一个额外的var b.可以改变显示的div的速率和总螺旋的扩展.螺旋的扩展由a定义,因为它定义了振幅. div显示的速率由新b定义.
因此,较小的b意味着较低的角度,意味着螺旋上更靠近在一起.
较小的a意味着较低的幅度,意味着在x和y轴上更靠近在一起.
如果图像的数量不可预测,那么因为螺旋出现而无所谓.当然,这会在添加太多时给你带来问题.
另一个解决方案就是在PHP中执行此操作,因为它没有任何动态可执行操作,因此您已经可以在后端执行此操作.可能与forloop和all相同,但随后在PHP中使用打印语句.
