Javascript 如何制作HTML5旋转列表/旋转轮选择器/选择器

我的问题是关于用户Byte仓鼠给出的答案：在回答中，他/她给出了一个如何使用html、css和Javascript创建滚动动画的示例。动画允许用户通过单击屏幕上选定数字的上方或下方滚动数字，选定数字显示在动画下方的div中

我想知道是否有可能做类似的事情，但不是让一个图像上下移动，它可以变成一个数字轮吗？我的意思是，在上面的例子中，一旦数字达到0，滚动就停止在一个方向上，我想知道是否有可能创建一个轮子，用户可以不断地从上到下旋转，或者如果他们愿意的话，从下到上旋转。这是否需要使用3d交互式动画软件

我看到了这个问题：但我不确定这些答案是否适用于我的项目，因为它们似乎不是互动的

---

由于用户Byte仓鼠的答案已经超过3岁了，我想知道是否有更好的方法通过html5动画来实现这种效果？我认为示例中的Javascript会使它无法在一些未启用Javascript的设备/浏览器上工作，这对吗？html5方法是确保效果在大多数设备/浏览器上运行的最佳方法吗？

以下是我从提供的信息中总结出来的内容。。。使用鼠标滚轮，滑动并单击顶部和底部数字。当然是无限的。没有特别的透视风格（现在），但我觉得它看起来相当不错。当然，这仍然是一种选择。没有使用我在评论或

requestAnimationFrame

中链接的插件，但是jQuery

animate（）

是一个很好的工具。该库具有强大的跨浏览器支持（实际上这就是它的优势所在），它所需要的只是一个指向它的链接，以便JavaScript能够执行。您可以使用CDN，此版本也适用于IE8-：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

8.
9
0
1.
2.
3.
4.
5.
6.
7.

您能再描述一下预期的结果吗？是垂直的还是水平的？我制作了一个小插件，可以使用

requestAnimationFrame

进行动画滚动，类似老虎机的盒子是否与您想要的类似？如果您想要任何事件交互，那么肯定需要JavaScript。但只有一小部分用户会禁用它。嗨@shikkediel谢谢你的回复。我要寻找的结果是一个垂直的车轮一样的效果。这类似于吃角子老虎机上的刻度盘的旋转方式，想象一下从这张图像正面看一个轮子：轮子上有数字0到9，当用户在任一方向（向上或向下）点击/拖动轮子时，轮子垂直旋转，以便向观众显示不同的数字。例如，如果面向观众的数字为5，且观众在5的下方单击（或单击滚轮并向下拖动（在触摸屏设备上）），则滚轮应旋转并静止，4面向观众。我希望我已经澄清了我想要实现的目标，再次感谢你的建议。因此，如果我理解正确，它就像你问题中的第一个链接，但无限，一次只显示一个数字-也只是一个正面视图，没有透视图？也许只是一些漂亮的图形让它看起来像那样。我认为使用鼠标滚轮可能会更好，移动设备需要使用定制的滑动脚本进行特殊处理。可能不太喜欢这个论坛发布完整的代码，但如果可以使用jQuery，我可能会尝试一下。还有一个问题。。。滚动应该像我链接到的插件一样动画，还是可以是一个瞬时开关？是的，它会像小提琴一样：除了无限，这意味着用户可以在两个动作（9，0，1）中从数字9移动到数字1，而不是有两端的数字列表，它将像一个真正的3d轮子一样无限。我很想有这样的3d动画，但我担心这超出了我的技能水平，我认为2d互动动画可能也同样有效，我很好奇是否可以通过在选定的数字上下显示上一个数字的一半和下一个数字的一半来应用一些透视图，而…那太神奇了！它的工作真的很好！

touchstart

似乎非常快速/响应迅速，我真的很想看看它在我的手机和平板电脑上的滑动支持效果如何，如果不太麻烦的话，是否可以将其添加到您的示例中？我不确定wheel事件是什么，它的效果会和你现在做的有很大不同吗？如果这是一个相对较新的东西，这是否意味着旧的浏览器将无法使用它？理想情况下，我希望用于移动控制盘的方法能够在所有浏览器和设备上得到广泛支持，并在将来继续得到支持。我想知道，以您的例子来说，是否可以获取所选号码并将其发送到我的数据库？我的意思是，我希望在轮子下面有一个div，其中包含一个按钮，当按下该按钮时，将通过链接到php脚本的ajax帖子将所选数字发送到我的数据库。在我问题的第一个例子中，所选的数字被称为“currentPosition”，它被放在这里称为“value”的div中：

currentPosition=targetPosition；document.getElementById（“value”）.innerHTML=“value:”+currentPosition…每当车轮移动时，此div中出现的数字（“值”）将自动更改。我可以通过单击“提交”按钮将此div的内容发送到我的数据库，但我想知道您的代码中与
currentPosition
等效的内容是什么？再次感谢你的帮助，看起来很棒！仔细看了一下，认为所有的要求都是正确的
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>