2013-03-31 99 views
0

所以,我建这个小互动轮盘:动画不适用于触摸事件?

http://techgoldmine.com/roulette/

我需要它在移动工作,以及桌面。 最初我通过让用户与重叠图像的SVG圈交互来处理交互,但出于测试目的,我已将其删除。

它仍然无法在手机上工作,我不能解决原因。 视区meta标签似乎被正确设置:

<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, user-scalable=no" /> 

记录鼠标/手指的位置:

$(document).bind('mousemove', function (e) { 
     xpos = e.pageX; 
     ypos = e.pageY; 
    }); 

    $(document).bind('touchmove', function (e) { 
     xpos = e.pageX; 
     ypos = e.pageY; 
    }); 

MOUSEDOWN /鼠标松开/ touchstart/touchend:

//mouse 
    $('.roulette').bind('mousedown', function() { 
     if (inMotion == true) { 
      cleanUp(); 
     } 
     intervalvar = setInterval(spinWheel, 24); 
     // spinWheel(); 
     $(document).bind('mouseup', function() { 
      count = Math.abs(force) 
      mouseup = 1; 
     }); 
    }); 

    //touch 
    $('.roulette').bind('touchstart', function() { 
     if (inMotion == true) { 
      cleanUp(); 
     } 
     intervalvar = setInterval(spinWheel, 24); 
     // spinWheel(); 
     $(document).bind('touchend', function() { 
      count = Math.abs(force) 
      mouseup = 1; 
     }); 
    }); 

我需要它与触摸一起工作。出了什么问题?

+0

我试图建立一个类似的事情得到它,本质上是一个触摸驱动轮盘赌,我会感兴趣看到你的代码,但链接不起作用,你有另一个链接呢? – Ash

回答

0

你不会从e.pageX 得到pageX属性要在触摸设备得到pageX属性,你从

//for javascript 
e.touches[0].pageX 
//for jquery 
e.originalEvent.touches[0].pageX 
+0

谢谢,这工作。 – styke