• 515 阅读
  • 1 回复

Hammer.js-鼠标事件

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)


实例一:滑动实例
实例二:取消实例
实例三:拖动实例
使用方法:
 var element = document.getElementById('test_el');
   var hammertime = Hammer(element).on("tap", function(event) {
       alert('hello!');
   });
相应的事件:

  • hold
  • tap
  • doubletap
  • drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
  • swipe, swipeup, swipedown, swipeleft, swiperight
  • transform, transformstart, transformend
  • rotate
  • pinch, pinchin, pinchout
  • touch (gesture detection starts)
  • release (gesture detection ends)

event对象,事件和属性:
属性:
drag: true
drag_block_horizontal: false
drag_block_vertical: false
drag_lock_to_axis: false
drag_max_touches: 1
drag_min_distance: 10
hold: true
hold_threshold: 3
hold_timeout: 500
prevent_default: true
prevent_mouseevents: false
release: true
show_touches: true
stop_browser_behavior: Object
swipe: true
swipe_max_touches: 1
swipe_velocity: 0.7
tap: true
tap_always: true
tap_max_distance: 10
tap_max_touchtime: 250
doubletap_distance: 20
doubletap_interval: 300
touch: true
transform: true
transform_always_block: false
transform_min_rotation: 1
transform_min_scale: 0.01

timestamp   {Number}        time the event occurred
target      {HTMLElement}   target element
touches     {Array}         touches (fingers, mouse) on the screen
pointerType {String}        kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
center      {Object}        center position of the touches. contains pageX and pageY
deltaTime   {Number}        the total time of the touches in the screen
deltaX      {Number}        the delta on x axis we haved moved
deltaY      {Number}        the delta on y axis we haved moved
velocityX   {Number}        the velocity on the x
velocityY   {Number}        the velocity on y
angle       {Number}        the angle we are moving
direction   {String}        the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
distance    {Number}        the distance we haved moved
scale       {Number}        scaling of the touches, needs 2 touches
rotation    {Number}        rotation of the touches, needs 2 touches *
eventType   {String}        matches Hammer.EVENT_START|MOVE|END
srcEvent    {Object}        the source event, like TouchStart or MouseDown *
startEvent  {Object}        contains the same properties as above,
                           but from the first touch. this is used to calculate
                           distances, deltaTime, scaling etc



官网:http://hammerjs.github.io/

小鱼的淘宝店铺-多多支持哇

Hammer.js 移动设备触摸手势js库

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档。使用方法:



// 先要对监听的DOM进行一些初始化

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20



<script src=
"http://eightmedia.github.com/hammer.js/hammer.js"
></script>
new

Hammer(document.getElementById(

"container"));
// 然后加入相应的回调函数即可
hammer.ondragstart =
function(ev) { };  // 开始拖动hammer.ondrag =
function(ev) { }; // 拖动中hammer.ondragend =
function(ev) { }; // 拖动结束hammer.onswipe =
function(ev) { }; // 滑动
hammer.ontap =
function(ev) { }; // 单击hammer.ondoubletap =
function(ev) { }; //双击hammer.onhold =
function(ev) { }; // 长按
hammer.ontransformstart =
function(ev) { }; // 双指收张开始hammer.ontransform =
function(ev) { }; // 双指收张中hammer.ontransformend =
function(ev) { }; // 双指收张结束
hammer.onrelease =
function(ev) { }; // 手指离开屏幕还支持jQuery插件的形式调用


$(
1

2

3

4

5

6

7

8

9



<script src=
"http://eightmedia.github.com/hammer.js/jquery.hammer.js"
></script>

 
.hammer({

       
// 对DOM进行一些初始化,这里可以加入一些参数  
})  
.bind("tap", function(ev) {        
console.log(ev);  
});官网地址:http://eightmedia.github.com/hammer.js/  (带演示)
源码地址:https://github.com/EightMedia/hammer.js

文件大小: 23K(源码)、6K(minified)
小鱼的淘宝店铺-多多支持哇