0

我在一个 iOS 网络应用程序上使用一些 JavaScript 代码有点超出我的体重。

我正在做的是使用以下方法将一层移动到另一层之上：

  1. 陀螺仪和加速度计数据和
  2. 触摸输入。

这意味着我有两个 javascript 都试图移动相同的东西。这效果不太好，从当前版本在 iOS 设备上查看时可以看到（提示：透明度是用右边的按钮打开的，不，它不能用鼠标向右移动除非您使用带有陀螺仪的 iOS 设备，否则不会移动）。

所以我已经完成了艰难的工作，但我坚持基于我对 JavaScript 的新手（ish）水平的预期是一个陷阱。

当触摸移动代码处于活动状态时，如何停止陀螺移动代码？另外我想我需要更新 x+y 值，这样一旦触摸移动结束，透明度就不会跳转位置。

我尝试在代码顶部添加 if, else 语句，但这似乎破坏了整个过程。

顺便说一句，感谢 StackOverflow 上的每个人，之前的 Q 和 As 对我取得了这么大的帮助。

帮助将不胜感激。

斯特凡

到目前为止，这是我的代码，它存在于 body 元素中......

var x = 0, y = 0,
    vx = 0, vy = 0,
    ax = 0, ay = 0;

var transp = document.getElementById("transp");

if (window.DeviceMotionEvent != undefined) {
    window.ondevicemotion = function(e) {
        ax = event.accelerationIncludingGravity.x * 5;
        ay = event.accelerationIncludingGravity.y * 5 + 19;
        document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x;
        document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y;
        document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z;

        if ( e.rotationRate ) {
            document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha;
            document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta;
            document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma;
        }       
    }

    setInterval( function() {
        var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
        if ( landscapeOrientation) {
            vx = vx + ay;
            vy = vy + ax;
        } else {
            vy = vy - ay;
            vx = vx + ax;
        }
        vx = vx * 0.98;
        vy = vy * 0.98;
        y = parseInt(y + vy / 70);
        x = parseInt(x + vx / 70);

        boundingBoxCheck();

        transp.style.top = y + "px";
        transp.style.left = x + "px";

    }, 25);
} 


function boundingBoxCheck(){
    if (x<-310) { x = -310; vx = -vx; }
    if (y<-300) { y = -300; vy = -vy; }
    if (x>document.documentElement.clientWidth) { x = document.documentElement.clientWidth; vx = -vx; }
    if (y>document.documentElement.clientHeight+400) { y = document.documentElement.clientHeight+400; vy = -vy; }

}

    $.fn.moveable = function() {  
      var offset = null;  
      var start = function(e) {  
        var orig = e.originalEvent;  
        var pos = $(this).position();  
        offset = {  
          x: orig.changedTouches[0].pageX - pos.left,  
          y: orig.changedTouches[0].pageY - pos.top  
        };  
      };  
      var moveMe = function(e) {  
        e.preventDefault();  
        var orig = e.originalEvent;  
        $(this).css({  
          top: orig.changedTouches[0].pageY - offset.y,  
          left: orig.changedTouches[0].pageX - offset.x  
        });  
      };  
      this.bind("touchstart", start);  
      this.bind("touchmove", moveMe);  
    };  

    $(".moveable").moveable();
4

1 回答 1

0

我的第一个想法是有一个 isTouching 变量，它在 touchstart 上设置为 true，在 touchEnd 上设置回 false。然后使用条件陀螺仪代码将仅在 isTouching 变量为假时运行。希望有帮助。

于 2013-06-27T15:48:44.747 回答