使用CSS滚动圆形

Question

我正在尝试将项目列表滚动，就像它们在一个圆圈中一样，但是它们不能一个接一个地适合，因为它们太多了。就像旋转式电话一样，我制作了一个快速而肮脏的图表来帮助更好地说明它

这必须适用于移动设备，因此根据我的经验，使用CSS转换会更顺畅。 This example看起来很有希望，但在滚动时我无法弄清楚如何使用它

编辑： 我尝试使用JS并监听滚动事件，但我觉得有更好的解决方案。我已经尝试了ScrollPath并且我喜欢它，但遗憾的是它不适用于移动设备。

第二次编辑尝试删除保留： 我花了一个小时试图弄清楚如何在没有太多JS开销的情况下做到这一点。很多时候，在我完成自己的解决方案后，我发现插件已经太晚了。我不是要求复制和粘贴代码片段，但是对于社区可以用简单的英语提出的最佳方法。对不起，如果这个问题听起来像是大学里的一个愚蠢的任务，但它是家里的一个爱好项目，我已经尝试了几种javascript方法，我会在以后发布代码，但是它基本上做了什么就是开火活动在每个滚动事件上，根据其与顶部的偏移量计算所有项目X的位置。手机上感觉有些迟钝，这就是我要求的原因。

Answer 1

你只需要破坏旧的三角学书并做一点罪恶/ cos。这是我能提出的最简单的例子。证明是在puddin'http://jsfiddle.net/67zMe/5/

HTML：创建要放置在圆圈上的项目列表。

<ul id="circle-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

CSS：放置一些基础工作CSS。

#circle-list
{
    width:300px;
    height:300px;
    position:relative;
    margin:0;
    padding:0;
    list-style:none;
    border:solid 2px #ccc;
    left:50%;
    top:20px;
    margin-left:-150px;
}

#circle-list li
{
    display:block;
    position:absolute;
    background:#ccc;
    font-family:arial;
    color:#666;
    text-align:center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;      
    width:30px;
    height:30px;
    line-height:30px;
    /** offset top and left half the item's width so that as we position the items, it is from their center point. **/
    margin:-15px 0 0 -15px;
}

JS：这就是魔术发生的地方。 Javascript来救援。

// Get degrees between each item, based on total items.
var angleSteps = 360 / $('#circle-list li').length;
// base angle to increment, which will rotate entire list.
var baseAngle = 0;
// center of the circle, relative to parent <ul>
var center = 150;
// distance to place each item from the center
var distance = 100;

function updateListPositions()
{
    // loop through each list item and place it on the circle based on it's angle
    $('#circle-list li').each(function(index, element)
       {
           var angle = baseAngle + (index * angleSteps);
           var x = distance * Math.cos(angle * (Math.PI / 180));
           var y = distance * Math.sin(angle * (Math.PI / 180));
           $(element).css({left:center+x, top:center+y});
       });
}

// set a timer to continually increment the base angle, which rotates the circle.
// this could easily be changed to increment the circle based on scroll delta

var stepInterval = setInterval(stepAngle, 25);

function stepAngle()
{
    baseAngle++;
    // update position as base angle changes
    updateListPositions();
}