0

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

在此处输入图像描述

这必须在移动设备上工作，所以根据我的经验，使用 CSS 转换会更顺畅。这个例子看起来很有希望，虽然我不知道如何在滚动时使用它

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

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

4

1 回答 1

1

你只需要破坏旧的三角学书并做一点 sin/cos。这是我能想到的最简单的例子。证据在布丁中' 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();
}
于 2013-10-29T21:44:40.077 回答