javascript - 多点触控 jQuery 拨号/微调器

Question

我正在使用 PhoneGap 创建适用于 iOS 的应用程序，phonegap 将 HTML、CSS 和 Javascript 打包到 native iPhone 应用程序中。

该应用程序将在屏幕中央显示一个大型旧式组合锁微调器。这个概念在 native iPhone 应用程序 (obj-c) Converbot 中得到了很好的体现。

所以我的问题是，是否可以使用 Javascript + CSS3 生成此文件，以前有人这样做过吗？有人能指出正确的入门方向吗？

我附上了一些图片，希望能增加清晰度......

http://www.istockphoto.com/file_thumbview_approve/8669353/2/istockphoto_8669353-safe-combination-lock-dial.jpg

Answer 1

回答您的问题:“可以做到吗？”是的。

更重要的问题是:“如何才能做到？”

我不愿意为你写你的元素，但我愿意给你一些指点。您可以从许多地方开始，每个地方都有自己的优点和挑战。您需要确切地弄清楚您想要什么功能，以及您希望您的应用如何响应。

首先，表盘将如何转动？一些选项是:

• 鼠标滚轮
• 方向键
• 按钮
• 拖动鼠标

轮子上有多少个槽口？

• 一个静态数字
• 动态数字

您还想要什么其他功能？

如果您在组合锁上使用静态数量的槽口，您可能需要考虑为每个旋转状态创建静态图像，预加载图像并根据轮子所处的状态显示不同的图像。

如果你想要一个动态数量的凹口，你将不得不研究 css3 转换

• > http://www.zenelements.com/blog/css3-transform/
• > http://www.the-art-of-web.com/css/css-animation/
• 只需在 google 上搜索 css3 transform

知道您只为 iPhone 制作此内容是您的优势。这意味着您可以使用 -webkit-transform 支持，而无需担心 IE 的变换疯狂(旋转矩阵、旋转原点、css 过滤器等)

然后您可以设置一个具有正确数量的凹口和标签的 div，所有元素都根据其位置正确旋转。

然后，您可以围绕其中心旋转整个 div，而不是单独移动任何部分，以产生组合锁定效果。