手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

来源：互联网发布：mysql 并发 version 编辑：程序博客网时间：2024/06/05 03:25

手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

最近需要做一个手机小门户网站，因为目前主流的手机都是安卓和苹果的，他们的浏览器内核都是webkit，这就意味着手机网站是可以用html5和css3开发的，越开发越感觉到html5和css3的强大与它的重要性，且不谈html5和css3，做网站的时候遇到了一个大问题，就是触摸js的问题，以前都是写的电脑端的js，突然接触到触摸屏的js可真是脑袋大了，因为手机网站属于初期，即使你有问题也在互联网上很难找得到，后来就在这个文章上找到了关于触摸屏的js插件《43个处理触摸事件的jquery插件》,最后找了一个自己觉得不错的插件——TouchSwipe,TouchSwipe是依赖于jquery的，而这个插件也没有中文资料，那我今天就整理一下他的相关信息及教程。此插件虽好，但是需要注意的是如果手指事件会在a标签超链接内失效，笔者做了一个焦点图，如果图片上有A标记的话会失效，所以在官方没有改正之前，还是放弃吧。。。。（另一个手机触摸插件jQuery Touchwipe Plugin 轻量级的手机触摸特效插件（javascript））事件：滑动事件：swipe (事件，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)滑动事件还有 方法和上面相同 swipeLift – 向左滑动  swipeRight-向右滑动 swipeUp-向上滑动  swipeDown-向下滑动swipeStatus (事件, 手指状态，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)swipeStatus 和 swipe 不同的是 这个参数是一直在执行的，大家可以看看下面的例子（复制到记事本上打开即可），来了解一下两个事件的不同之处。两根手指往里捏或者扩张事件：pinchStatus(事件,手指状态 ,方向(in和out，需要注意的一点in是往外扩，out是往里捏),滑动的距离, 一次滑动的时间 , 几根手指, 变焦)包含：pinchIn（向外扩张），pinchOut （向里捏）其他常用事件还有：doubleTap （双击屏幕） click （单击屏幕） longTap (长按屏幕)滑动事件demo：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.min.js"></script><script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js"></script><script>$(function() {//swipe 的dome$("#test").swipe( {swipe:function(event, direction, distance, duration, fingerCount) {$(this).text("你用"+fingerCount+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " );},});//swipeStatus的dome$("#test2").swipe( {swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {$(this).text("你用"+fingerCount+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " +"你在"+phase+"中");},});});</script></head><body><div id="test" style="height:200px; background:#C63;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff">swipe 的dome</div><div id="test2" style="height:200px; background:#C63; margin-top:20px;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff">swipeStatus的dome</div></body></html>

移动端div内手指滑动内容效果，不出现滚动条：

<br><br>$(function () {    //手机滑动效果    var swiptleft = 0;    var swiptw = $(".touchswipe").width() - $(".borrowlistcon .block").eq(0).width();    $(".touchswipe").swipe({        swipeLeft: function (event, direction, distance, duration, fingerCount) {            swiptleft = swiptleft - distance;            if (swiptleft > swiptw) {                $(".touchswipe .block").animate({                    left: swiptleft + 'px'                }, 10)            }            else {                swiptleft = swiptw;                $(".touchswipe .block").animate({                    left: swiptw + 'px'                }, 10)            }        },        swipeRight : function (event, direction, distance, duration, fingerCount) {                swiptleft = swiptleft + distance;                if (swiptleft < 0) {                    $(".touchswipe .block").animate({                        left: swiptleft + 'px'                    }, 10)                }                else {                    swiptleft = 0;                    $(".touchswipe .block").animate({                        left: 0 + 'px'                    }, 10)                }    }    });})

官方网站
英文说明地址：
下载地址

现在有那么多的设备支持触摸事件，你没有理由不去丰富你的UI交互功能。

开发背景

TouchSwipe原本是为Renault 设计的，是在一个IPad的专题网站上展示一个汽车的相册，这个插件可以让用户触摸操作幻灯片的播放，例如up/down或者是left/right，当时（2010）jQuery移动开发还处于起步阶段，所以我们决定编写自己的插件将触摸事件jQuery。

特点

Detects swipes in 4 directions, “up”, “down”, “left” and “right”
Detects pinches “in” and “out”
Supports single finger or double finger touch events
Supports click events both on the touchSwipe object and its child objects
Definable threshold / maxTimeThreshold to determin when a gesture is actually a swipe
Events triggered for swipe “start”,”move”,”end” and “cancel”
End event can be triggered either on touch release, or as soon as threshold is met
Allows swiping and page scrolling
Disables user input elements (Button, form, text etc) from triggering swipes

Swipe

在它最基本的，该插件将添加一部Swipe检测使用Swipe处理程序，你可以发现哪个方向用户Swipe。

$("#swipe").swipe({  swipe:function(event, direction, distance, duration, fingerCount) {    $(this).text("You swiped " + direction );  }});

为了方便我们添加处理程序，只有在一个特定方向触发：swipeLeft, swipeRight, swipeUp, swipeDown，每种都通过了以下的论点：event, direction, distance, duration, fingerCount.

$("#swipe").swipe({  swipeLeft:function(event, direction, distance, duration, fingerCount) {    //This only fires when the user swipes left  }});

距离阈值

确保动作是一种故意swipe，最小距离阈值被添加，默认是75px。如果用户移动小于然后swipe[Direction] 的处理是不触发。

$("#threshold").swipe({  swipe:function(event, direction, distance, duration, fingerCount){    $(this).text("You swiped " + direction + " for " + distance + "px" );  },  threshold:100});

Fingers

我们还可以限制swipe只触发1或“所有”组合的手指，用手指的value，0用手指将报告如果运行在非触摸设备（桌面）。

$("#fingers").swipe({  swipe:function(event, direction, distance, duration, fingerCount){    $(this).text("You swiped " + direction + " with " + fingerCount + " fingers" );  },  fingers:'all'});

Swipe Status

为了使更多的复杂界面的相互作用，也可以用于swipe每个阶段接收事件，使用swipeStatus处理程序。

$("#status").swipe( {swipeStatus:function(event, phase, direction, distance, duration, fingerCount){  //Here we can check the:  //phase : 'start', 'move', 'end', 'cancel'  //direction : 'left', 'right', 'up', 'down'  //distance : Distance finger is from initial touch point in px  //duration : Length of swipe in MS   //fingerCount : the number of fingers used  },  threshold:100,  maxTimeThreshold:2500,  fingers:'all'});

Simple image scroller demo

这个简单的例子使用刷卡状态检测当用户是移动的，但尚未达到滑动阈值，图像拖动直到达到阈值，并滚动到下一个图像，如果刷卡没有完成，图像会回到它开始的地方。

滑动事件

swipe (事件，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)，滑动事件还有方法和上面相同 swipeLift – 向左滑动 swipeRight-向右滑动 swipeUp-向上滑动 swipeDown-向下滑动。
swipeStatus (事件, 手指状态，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)，swipeStatus 和 swipe 不同的是这个参数是一直在执行的，大家可以看看下面的例子（复制到记事本上打开即可），来了解一下两个事件的不同之处。
两根手指往里捏或者扩张事件：pinchStatus(事件,手指状态 ,方向(in和out，需要注意的一点in是往外扩，out是往里捏),滑动的距离, 一次滑动的时间 , 几根手指, 变焦)
包含：pinchIn（向外扩张），pinchOut （向里捏）
其他常用事件还有：doubleTap （双击屏幕） click （单击屏幕） longTap (长按屏幕)

More info

For the source, documentation, detailed demos, or to contribute, see:

demos :
docs :

jQuery Touchwipe Plugin 轻量级的手机触摸特效插件（javascript
《43个处理触摸事件的jquery插件》

Markdown和扩展Markdown简洁的语法
代码块高亮
图片链接和图片上传
LaTex数学公式
UML序列图和流程图
离线写博客
导入导出Markdown文件
丰富的快捷键

快捷键

加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目价格 Computer $1600 Phone $12 Pipe $1

可以使用冒号来定义对齐方式：

项目价格数量 Computer 1600 元 5 Phone 12 元 12 Pipe 1 元 234

定义列表

Markdown　Extra　定义列表语法：
项目１
项目２: 定义 A; 定义 B
项目３: 定义 C; 定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorizationdef somefunc(param1='', param2=0):    '''A docstring'''    if param1 > param2: # interesting        print 'Greater'    return (param2 - param1 + 1) or Noneclass SomeClass:    pass>>> message = '''interpreter... prompt'''

脚注

生成一个脚注1.

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为：Γ(n)=(n−1)!∀n∈ℕ。
块级公式：

x = - b \pm b 2 - 4 a c ‾ ‾ ‾ ‾ ‾ ‾ ‾ ‾ \sqrt 2 a

更多LaTex语法请参考这儿.

UML 图:

可以渲染序列图：

或者流程图：

关于 序列图 语法，参考这儿,
关于 流程图 语法，参考这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
IE９以下不支持
IE９，１０，１１存在以下问题
1. 不支持离线功能
2. IE9不支持文件导入导出
3. IE10不支持拖拽文件导入

这里是脚注的内容. ↩

阅读全文

0 0

手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

快捷键

Markdown及扩展

表格

定义列表

代码块

脚注

目录

数学公式

UML 图:

离线写博客

浏览器兼容