jQuery.event.move插件实现手机移动触摸功能例子

jQuery.event.move是一个移动触摸开发插件,跟上一篇jquery.event.swipe的作者是同一个人,通过jQuery插件库自定义’movestart’, ‘move’ and ‘moveend’事件,移动鼠标和触摸事件提供设备设置按住到释放相互作用的一个简单的方法,轻量级移动网页开发插件。

jQuery.event.move移动触摸开发插件

移动的事件

MoveStart

解雇后MouseDown或touchstart,当指针越过一个门槛距离touchstart MouseDown或位置。
move

向每个动画帧在mousemove或touchmove改变光标位置。

MoveEnd

解雇后在最后一步或touchend,事件发生后,在触摸事件的情况时,手指开始移动已取消。
将事件对象的增加与性能:

e.pagex
e.pagey

指针当前页面坐标。

e.startx
e.starty

页面坐标的指针在MoveStart。

e.deltax
e.deltay

远程指针已经从MoveStart。

e.velocityx
e.velocityy

在像素/ MS的速度,在过去的几个事件平均。
使用方法
以同样的方式使用它们作为你通常绑定到事件在jQuery:

jQuery('.mydiv')
.bind('movestart', function(e) {
    // move starts.
})
.bind('move', function(e) {
    // move .mydiv horizontally
    jQuery(this).css({ left: e.startX + e.deltaX });
}).bind('moveend', function() {
    // move is complete!
});

为什么不直接使用原始的鼠标或触摸事件?
是的,你可以。但需要注意的写作jquery.event.move抽象了这种鼠标和触摸事件的相互作用模型时的细节:
支持鼠标和触摸设备,将同一事件API为
节流阀移动到动画帧,防止不必要的电话
忽略鼠标右键点击修改键
防止在移动文本选择
防止触摸界面滚动而移动
支持多点触控
处理BUG(铬,可能所有的Android),包括涉及changedtouches没变
处理不同浏览器在接触iOS是活的物体,在Android它们是静态的
不博克形式输入在移动节点的相互作用
抑制拖放事件
移动事件的目的是“帮助建立互动积木”。他们追踪单个 手指或单一的鼠标,并揭露性质对其事件对象用于检测。
关于拖动事件?
移动事件是为了拖动事件,其中两个有不同的含义:拖动事件是传输数据时移动事件是做出交互界面 said, movestart, move 和 moveend事件故意回声dragstart,drag和dragend事件,有一个显着性差异: 哪里drag你是否有事件触发连续移动指针或不,的move事件发生后指针已经移动。
其中一个dragstart任何移动事件绑定到同一个节点,拖动事件被抑制。

时间: 2024-09-27 05:07:12

jQuery.event.move插件实现手机移动触摸功能例子的相关文章

jQuery.event.swipe插件实现支持手势操作幻灯片效果

jQuery.event.swipe是一个让幻灯片支持手势操作的Jquery插件,他能自定义触摸事件,阻止浏览器自身的点击事件,对于移动开发中图片展示幻灯片开发有很大的帮助,一个轻量级的JavaScript插件库. jQuery.event.swipe让幻灯片支持手势操作的Jquery插件 Project Github: github.com/stephband/jquery.event.swipe Issues: github.com/stephband/jquery.event.swipe/

分享20款美化网站的 jQuery Lightbox 灯箱插件_jquery

jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力. 因此在这个集合中,我们编译了20款最好的 jQuery 灯箱插件清单,这将有助于开发人员创建和设计精美的网站.您可以将这些插件很容易地集成到您的网站,可以下载他们瞬间充实你的插件库. 1. lightGallery jQuery lightGallery

利用JQuery拖拽插件实现拖拽效果

<%@ page language="c#" autoeventwireup="true" codebehind="default.asp教程x.cs" inherits="jquerydrag._default" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.or

基于jquery瀑布流插件实现相册无限滚动

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的"哇哦" 等等.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.所以,我们给这样的布局起了一个形象的名字 - 瀑布流式布局. Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐.漂亮! 官网插件下载地址以及详解地址: http://ma

jQuery时间轴插件使用详解_jquery

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: <!-- //设置内容; window.onWebMessage( '{"type":&qu

jquery滑动块插件推荐:noUiSlider和slideControl使用例子

滑动块在表现进度,人性化选择范围的场景下,非常合适.今天就给大家推荐2款简洁而不简单的jquery滑动块插件:noUiSlider和slideControl. 1.noUiSlider 一个轻量级的,高度可定制的范围滑块noUiSlider.支持谷歌Chrome,火狐,歌剧,Safari浏览器和Internet Explorer7至10.它也支持触摸功能的设备,如iPhone,iPad和Windows8和Android的设备. 使用方法很简单: 配置html: <div id="color

jQuery的Scrollify插件实现滑动到页面下一节点

  这篇文章主要介绍了jQuery的Scrollify插件实现滑动到页面下一节点的相关资料,需要的朋友可以参考下 有时我们需要做一个单页面介绍产品特性,而单页面内容非常多且页面非常长,为了快速定位到产品特性节点,我们使用js侦听用户滚轮事件,当用户触发滚轮滑动或者使用手势触屏滑动时,即可定位到相应的节点.一款jQuery插件叫Scrollify帮我们做到了. Scrollify需要jQuery 1.6+以及缓冲动画easing插件配合来实现.HTML基本结构如下: ? 1 2 3 4 5 6 7

我的jQuery动态表格插件二

     本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了.        在上篇我的jQuery动态表格插件中介绍了插件的基本使用方法.在实际运用的时候出现了一些其他的需求,所以插件再次升级,增加了一些辅助功能. 1:EnterToTab:$("selector"). EnterToTab(),是的selector中的空间可以回车变为tab键使用,方便用户的输入. 代

jQuery的Scrollify插件实现滑动到页面下一节点_jquery

有时我们需要做一个单页面介绍产品特性,而单页面内容非常多且页面非常长,为了快速定位到产品特性节点,我们使用js侦听用户滚轮事件,当用户触发滚轮滑动或者使用手势触屏滑动时,即可定位到相应的节点.一款jQuery插件叫Scrollify帮我们做到了. Scrollify需要jQuery 1.6+以及缓冲动画easing插件配合来实现.HTML基本结构如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&