javascript手机手势动作touch触屏原理分析教程

之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理。

  1. $(function(){
  2. ????document.getElementById("moveid").addEventListener('touchstart',touchStart);
  3. ????document.getElementById("moveid").addEventListener('touchmove',touchMove);
  4. ????document.getElementById("moveid").addEventListener('touchend',function(){
  5. ????????isdrag?=?false;
  6. ????});
  7. });

我们的例子来说明今天。在触觉的实现,我们必须使用js注册侦听器,然后添加touchstart touchmove touchend,。今天我们添加的代码jQuery,但得到的ID和CSS,呵呵,毕竟,我们都是用JQ。但增加的事件,我们仍然要使用文档,getElementById这个模型,因为这个东西只有JS,jQuery有没有这样的事,触摸。

  1. function?touchStart(e){
  2. ???isdrag?=?true;
  3. ???e.preventDefault();
  4. ???tx?=?parseInt($("#moveid").css('left'));
  5. ???ty?=?parseInt($("#moveid").css('top'));
  6. ???x?=?e.touches[0].pageX;
  7. ???y?=?e.touches[0].pageY;
  8. }

大家可以看到,在代码里有这句话,e.preventDefault(),假设不写这一句,你在触屏的时候,页面就会滑动,所以它的作用是巨大的。。。
e.touches[0]表示什么呢?就是手势里的第一种,我们就认为是touch吧,触屏里还有其它两个手指的手势,我们今天就学一种,呵。。。
我们取得对像的left,top及手的触屏位置,这时,touchstart完成了。。。

  1. function?touchMove(e){
  2. ??if?(isdrag){
  3. ???e.preventDefault();
  4. ???????var?n?=?tx?+?e.touches[0].pageX?-?x;
  5. ???????var?h?=?ty?+?e.touches[0].pageY?-?y;
  6. ???????$("#moveid").css("left",n);
  7. ???????$("#moveid").css("top",h);
  8. ???}
  9. }

我们那个isdrag是用来判断是否可以拖动的,我们用手拖动后的位置加上对像的位置减去touchstart时的位置,就可以取得移动后的位置,这样,我们就完成了touchmove这个过程。。
对于touchend,我们就写上一个ifdrag=false,表示不再拖动啦。。。

演示代码

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta?id="viewport"?name="viewport"?content="width=device-width,?initial-scale=1.0,?minimum-scale=1.0,?maximum-scale=1.0,?user-scalable=no"?/>
  5. <meta?name="MobileOptimized"?content="320"/>
  6. <title>触屏特效,手机网页</title>
  7. <style?type="text/css">
  8. ????html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
  9. ????body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section?{margin:0;padding:0;}
  10. ????.dragme{background:#000;width:60px;height:60px;?color:#fff;?position:absolute;?left:40px;?top:40px;?text-align:center;?line-height:60px;}
  11. </style>
  12. <script?type="text/javascript"?src="http://code.jquery.com/jquery-latest.js"></script>
  13. <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
  14. </head>
  15. <body>
  16. <div?id="moveid"?class="dragme">
  17. ????lvtao.net
  18. </div>
  19. <script?type="text/javascript">
  20. var?isdrag=false;
  21. var?tx,x,ty,y;
  22. $(function(){
  23. ????document.getElementById("moveid").addEventListener('touchstart',touchStart);
  24. ????document.getElementById("moveid").addEventListener('touchmove',touchMove);
  25. ????document.getElementById("moveid").addEventListener('touchend',function(){
  26. ????????isdrag?=?false;
  27. ????});
  28. });
  29. function?touchStart(e){
  30. ???isdrag?=?true;
  31. ???e.preventDefault();
  32. ???tx?=?parseInt($("#moveid").css('left'));
  33. ???ty?=?parseInt($("#moveid").css('top'));
  34. ???x?=?e.touches[0].pageX;
  35. ???y?=?e.touches[0].pageY;
  36. }
  37. function?touchMove(e){
  38. ??if?(isdrag){
  39. ???e.preventDefault();
  40. ???????var?n?=?tx?+?e.touches[0].pageX?-?x;
  41. ???????var?h?=?ty?+?e.touches[0].pageY?-?y;
  42. ???????$("#moveid").css("left",n);
  43. ???????$("#moveid").css("top",h);
  44. ???}
  45. }
  46. </script>
  47. </body>
  48. </html>
标签: