罗盘旋转 javascript 角度问题 - 旋转/平移

发布于 2024-08-22 19:51:22 字数 382 浏览 8 评论 0原文

我正在为 iphone 构建一个指南针，呃，只是为了实验目的并学习如何使用 javascript 和phonegap 来实现它。

现在我已经能够获得度数，我能够使用 webkit-transform translateZ （或者我可以使用旋转）将 deg 0-360 应用于 div （我们称之为“轮子”），

但我有一个bug：

当轮子从 0 度到 359 度时，一切正常，但是当度数再次达到 0 度时，它不再沿该方向（顺时针）平滑旋转，而是再次逆时针快速旋转到 0 度位置...

我不知道我知道我很清楚，因为没有例子就不容易解释......'

基本上我的问题是找到正确的脚本来移动轮子，从我可以从iPhone轻松获得的值0-360开始。

欢迎任何建议。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

固执像三岁 2024-08-29 19:51:23

当大于 360 时翻转。以下是示例：http://gutfullofbeer.net/rotate.html

[编辑] 我已经更新了代码来处理逆时针旋转。这是我的基于 jQuery 的 Javascript 的样子：

  $(function() {
    var rotator = function(class, inc) {
      var degrees = 0;
      return function() {
        $('.' + class)
          .css({'-webkit-transform': 'rotate(' + degrees + 'deg)'})
          .css({'-moz-transform': 'rotate(' + degrees + 'deg)'})
          ;
        degrees += inc;
        if (degrees > 360) degrees -= 360;
        if (degrees < 0) degrees += 360;
      };
    };
    setInterval(rotator('clockwise', 2), 33);
    setInterval(rotator('counter-clockwise', -2), 33);
  });

Roll over when you get bigger than 360. Here's a sample: http://gutfullofbeer.net/rotate.html

[edit] I've updated the code to deal with counter-clockwise rotation. Here's what my jQuery-based Javascript looks like:

  $(function() {
    var rotator = function(class, inc) {
      var degrees = 0;
      return function() {
        $('.' + class)
          .css({'-webkit-transform': 'rotate(' + degrees + 'deg)'})
          .css({'-moz-transform': 'rotate(' + degrees + 'deg)'})
          ;
        degrees += inc;
        if (degrees > 360) degrees -= 360;
        if (degrees < 0) degrees += 360;
      };
    };
    setInterval(rotator('clockwise', 2), 33);
    setInterval(rotator('counter-clockwise', -2), 33);
  });

回复收藏 0 原文