手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明
手机触屏触摸特效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 的domediv>
<div id="test2" style="height:200px; background:#C63; margin-top:20px;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff">swipeStatus的domediv>
body>
html>移动端div内手指滑动内容效果，不出现滚动条：
$(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_authorization
def somefunc(param1='', param2=0):
'''A docstring'''
if param1 > param2: # interesting
print 'Greater'
return (param2 - param1 + 1) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''脚注
生成一个脚注1.
目录
用 [TOC]来生成目录：
- 手机触屏触摸特效javascript-TouchSwipe依赖于jquery库中文说明
- 快捷键
- Markdown及扩展
- 表格
- 定义列表
- 代码块
- 脚注
- 目录
- 数学公式
- UML 图
- 离线写博客
- 浏览器兼容
数学公式
使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.
- 行内公式，数学公式为： Γ(n)=(n−1)!∀n∈ℕ 。
- 块级公式：
x=−b±b2−4ac‾‾‾‾‾‾‾‾√2a
更多LaTex语法请参考 这儿.
UML 图:
可以渲染序列图：
Created with Raphaël 2.1.0 张三 张三 李四 李四 嘿，小四儿, 写博客了没? 李四愣了一下，说： 忙得吐血，哪有时间写。
或者流程图：
Created with Raphaël 2.1.0 开始 我的操作 确认？ 结束 yes no
- 关于 序列图 语法，参考 这儿,
- 关于 流程图 语法，参考 这儿.
离线写博客
即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。
用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。
博客发表后，本地缓存将被删除。
用户可以选择 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。
注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。
浏览器兼容
- 目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
- IE９以下不支持
- IE９，１０，１１存在以下问题
- 不支持离线功能
- IE9不支持文件导入导出
- IE10不支持拖拽文件导入
- 这里是 脚注 的 内容. ↩