$(function(){
var _showImgW;
var _showImgH;
var _showImgMT;
var _showImgML;
$("#imgDiv").swipe({
swipeStatus:function(event, phase, direction, distance , duration , fingerCount) {
//$(this).find('#swipe_text').text("swiped " + distance + ' px');
if(phase === $.fn.swipe.phases.PHASE_END || phase === $.fn.swipe.phases.PHASE_CANCEL) {
//$(this).find('#swipe_text').text("No swipe was made");
}
if (phase == "start")
{
_showImgMT = $(this).find("._showImg").css("margin-top").replace("px", "");
_showImgML = $(this).find("._showImg").css("margin-left").replace("px", "");
}
if (direction == "up" && (phase == "cancel" || phase == "end")) {
//向上滑动 到顶
var mt = _showImgMT + duration;
//$(this).find("._showImg").css("margin-top",mt+"px");
}
else if (direction == "down" && (phase == "cancel" || phase == "end")) {
//向下滑动 到顶
var ml = _showImgML - duration;
//$(this).find("._showImg").css("margin-left",ml+"px");
}
else if (direction == "left" && (phase == "cancel" || phase == "end")) {
//向左滑动 到顶
var ml = _showImgML - duration;
//$(this).find("._showImg").css("margin-left",ml+"px");
}
else if (direction == "right" && (phase == "cancel" || phase == "end")) {
//向右滑动 到顶
var ml = _showImgML - duration;
//$(this).find("._showImg").css("margin-left",ml+"px");
}

if (direction == "up" && phase != "cancel" && phase != "end") {
//向上滑动过程中
var h = $(this).find("._showImg").height();
var mt = _showImgMT - duration;
if(get_height_for_window()-h>mt)
mt = get_height_for_window()-h;
//$(this).find("._showImg").css("margin-top",mt+"px");
$(this).find("._showImg").animate({ marginTop: mt + 'px' }, 100);
}
else if (direction == "down" && phase != "cancel" && phase != "end") {
//向下滑动过程中
_showImgMT = $(this).find("._showImg").css("margin-top").replace("px", "");
var mt = _showImgMT + duration;
if(mt<=0)
mt = 0;
//$(this).find("._showImg").css("margin-top",mt+"px");
$(this).find("._showImg").animate({ marginTop: mt + 'px' }, 100);
}
else if (direction == "left" && phase != "cancel" && phase != "end") {
//向左滑动过程中
var w = $(this).find("._showImg").width();
var ml = _showImgML - duration;
if(get_width_for_window()-w>ml)
ml = get_width_for_window()-w;
//$(this).find("._showImg").css("margin-left",ml+"px");
$(this).find("._showImg").animate({ marginLeft: ml + 'px' }, 100);
}
else if (direction == "right" && phase != "cancel" && phase != "end") {
//向右滑动过程中
_showImgML = $(this).find("._showImg").css("margin-left").replace("px", "");
var ml = _showImgML + duration;
if(ml<=0)
ml = 0;
//$(this).find("._showImg").css("margin-left",ml+"px");
$(this).find("._showImg").animate({ marginLeft: ml + 'px' }, 100);
}
},
pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom) {
if(phase == "start") {
_showImgW =$(this).find("._showImg").width();
_showImgH = $(this).find("._showImg").height();
}
if(direction=="in")
{ //pinchZoom 缩放比例
var w = _showImgW*pinchZoom;
var h = _showImgH*pinchZoom;
$(this).find("._showImg").css("width", w + 'px' );
$(this).find("._showImg").css("height", h + 'px' );
}
else if(direction=="out")
{
var w = _showImgW*pinchZoom;
var h = _showImgH*pinchZoom;
$(this).find("._showImg").css("width", w + 'px' );
$(this).find("._showImg").css("height", h + 'px' );
}
},
swipe:function(event, direction, distance, duration, fingerCount) {
//$(this).find('#swipe_text').text("You swiped " + direction + " with " + fingerCount + " fingers");
},
pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom) {
$(this).find('#pinch_text').text("You pinched " +direction + " by " + distance +"px, zoom scale is "+pinchZoom);
//ecg.alert(direction + " by " + distance +"px");
//$(this).find("._showImg").animate({ width: -duration + 'px' }, 0);
},
pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom) {
$(this).find('#pinch_text').text("You pinched " +direction + " by " + distance +"px, zoom scale is "+pinchZoom);
//ecg.alert(direction + " by " + distance +"px");
},
fingers:'all'
});
});

touchSwipe 上下左右滑动,二指缩放 效果不好。的更多相关文章

  1. 23web app实现上下左右滑动

    转载请说明出处:http://blog.csdn.net/wowkk/article/category/1619287 (创意系列) /*最近项目须要苹果电脑,假设您支持学生创业并愿意赞助我们一台,请 ...

  2. Android上下左右滑动,显示底层布局

    转载博客地址:http://www.cnblogs.com/flyme2012/p/4106308.html 闲着没事做了一个小东西.Android的上下左右滑动,显示底层布局.可以做类似于QQ消息列 ...

  3. Cocos2dx 小技巧(十四)ScrollView实现缩放效果

    这阶段心绪比較乱,所以这篇开头就不扯淡了.(谁说大姨夫来了我跟谁急!~~)说到大姨夫我突然想到英雄联盟有个美女讲解叫伊芙蕾亚,她的堂弟ID居然叫:姨夫累呀,好笑吧(呵呵,有点冷~~额,我都说不扯淡了) ...

  4. JavaScript之屏幕上下左右滑动监听

    前言 存在这么一个需求,根据用户在屏幕不同的滑动方向(上.下.左.右),使用js脚本判断出不同的滑动行为,更新网页为不同的界面. 源码 参考了博文[1]的源码,但由于存在一些漏洞,比如:上下滑动事件监 ...

  5. .Net语言 APP开发平台——Smobiler学习日志:如何快速实现类似于微信的悬浮显示二维码效果

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

  6. 【Java Saves!】Session 5:计算机器之三--二指禅

    人有十指.人类掰着手指头,发明出了0.1.2-9这十个数字.后来手指头不够用了,便发明出数位(个.十.百.千-)和满十进一的规则,称为十进制. 而计算机靠两个手指头工作.在计算机内部,只有0和1两个数 ...

  7. Android 四种简单的动画(淡入淡出、旋转、移动、缩放效果)

    最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...

  8. 实现了在android实现左右滑动切换界面的效果

    这是实现了在android实现左右滑动切换界面的效果,该效果的源码下载,请到源码天堂下载吧,喜欢的朋友可以研究一下. 布局文件 <?xml version="1.0" enc ...

  9. 【Android进阶】使用Andbase快速开发框架实现常见侧滑栏和滑动标签页组合效果

    最近闲来无事,在网上寻找源代码看,突然发现了一个国内技术牛人开发的快速开发框架Andbase,花了一天时间研究了下源码和怎么使用,现将开发常见的侧滑栏和滑动标签页组合效果的使用介绍个大家,希望可以减少 ...

随机推荐

  1. C++ STL lower_bound()和upper_bound()

    lower_bound()和upper_bound()用法 1.在数组上的用法 假设a是一个递增数组,n是数组长度,则 lower_bound(a, a+n, x):返回数组a[0]~a[n-1]中, ...

  2. HTML基础part1

    HTML基础 Web的本质就是利用浏览器访问socket服务端,socket服务端收到请求回复数据提供给浏览器进行渲染显示. import socket def main(): sock = sock ...

  3. 20145209刘一阳《JAVA程序设计》第1周学习总结

    20145209刘一阳<JAVA程序设计>第1周学习总结 本周任务 了解Java基础知识 了解JVM.JRE与JDK,并下载.安装.测试JDK 了解PATH.CLASSPATH.SOURC ...

  4. MapWinGIS介绍

    MapWinGIS是一个不错的开源组件GIS项目,基于微软的COM思想编写,团队的开发人员主要来自爱荷华大学,而且开发团队中还有一位中国人.它的功能类似于AO(当然没有AO那么强大),其核心是一个名字 ...

  5. 【转】odoo 新API装饰器中one、model、multi的区别

    http://blog.csdn.net/qq_18863573/article/details/51114893 1.one装饰器详解 odoo新API中定义方式: date=fields.Date ...

  6. 如果看懂git -help

    每一个git 命令,都可以git * --help 打开git 的网页去看详细内容,也可以git * -help 在当前命令行里面看. 如下: zy@caoxinyu MINGW64 /f/git/i ...

  7. Hive支持行级update、delete时遇到的问题

    Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置.要想支持行级insert.update.delete,需要配置Hive支持事务.(行级的insert好像不配置也能运 ...

  8. PLSQL-包函数存储过程

    包: 包是PLSQL中多个单元的逻辑组合,他将过程组合在一个包内容,以供用户调用,使用后,不需要程序员频繁的修改程序,可以保持程序的逻辑完整性,对包中的过程重新定义或者编译,以便修改部分功能,从而更好 ...

  9. 使用 Fiddler工具模拟post四种请求数据

    post请求主体详解: 对于get请求来说没有请求主体entity-body.对于post请求而言,不会对发送请求的数据格式进行限制,理论上你可以发任意数据,但是服务器能不能处理就是另一回事了.服务器 ...

  10. git配置github链接

    1.百度git官网-下载最新版git 2.一路默认下一步安装 3.打开 git bash here 命令行 4.注册github账号(用自己的邮箱就可以,不会英文可以用谷歌翻译)注册成功后建立项目 5 ...