今天接到一个任务，里面有个小动画是，手指拖动火柴到蜡烛上，蜡烛点燃。现在研究了下元素随手指移动的代码。
<!doctype html>
<html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #someElm { width: 100px; height: 100px; background:#ccc; position:absolute; } </style> </head> <body> <header> </header> <div id="main"> <div id="someElm"> </div> </div> <footer> </footer> <script src="http://code. jQuery .com/jquery-1.5.2.min.js"></script> <!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>--> <script> $('#someElm').bind('touchmove',function(e){ e.preventDefault(); var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; var elm = $(this).offset(); var x = touch.pageX - elm.left/2; var y = touch.pageY - elm.top/2; $(this).css('left', x+'px'); $(this).css('top', y+'px'); console.log(touch.pageY+' '+touch.pageX); }); </script> </body></html>
触摸事件
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1. touchstart ：手指放在一个DOM元素上。 2. touchmove ：手指拖曳一个DOM元素。 3. touchend ：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1. touches ：当前位于屏幕上的所有手指的一个列表。 2. targetTouches ：位于当前DOM元素上的手指的一个列表。 3. changedTouches ：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier ：一个数值，唯一标识触摸会话（touch session）中的当前手指。 2. target ：DOM元素，是动作所针对的目标。 3. 客户/页面/屏幕坐标 ：动作在屏幕上发生的位置。 4. 半径坐标和 rotationAngle ：画出大约相当于手指形状的椭圆形。
