$(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. PHP实现识别带emoji表情的字符串

    function have_special_char($str) { $length = mb_strlen($str); $array = []; for ($i=0; $i<$length; ...

  2. c++ 面向对象程序设计

    1. OOP:概述 2. 定义基类和派生类 3. 虚函数 4. 抽象基类 5. 访问控制与继承 6. 继承中的类作用域 7. 构造函数与拷贝控制 8. 容器与继承

  3. crontab执行PHP

    在stackoverflow上看到一个问题:http://stackoverflow.com/questions/14015543/crontab-php-wget-or-curl 有三种通过cron ...

  4. 03-JVM内存模型:堆与方法区

    一.堆(Heap) 1.1.什么是堆 堆是用于存放对象的内存区域.因此,它是垃圾收集器(GC)管理的主要目标.其具有以下特点: 堆在逻辑上划分为“新生代”和“老年代”.由于JAVA中的对象大部分是朝生 ...

  5. mybatis interceptor 处理查询参数及查询结果

    拦截器:拦截update,query方法,处理查询参数及返回结果. /** * Created by windwant on 2017/1/12. */ @Intercepts({ @Signatur ...

  6. 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件(1)

    这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...

  7. TW实习日记:第23天

    主要的项目已经在修改一些细节以提高用户体验的阶段了,所以并不是太忙,主要就是对样式和一些细节修修改改.然后下午帮助同事的新项目做了一个功能点,主要就是调通接口就行,因为参数巨多,所以总要和网端那边的后 ...

  8. TW实习日记:第14天

    今天可以说是又忙又不忙了,忙是因为要赶bug,似乎总有种隐形的力量催着你交工,但实际上太多涉及后端接口的问题,所以又要等别人修改接口才能改bug,可以说真是十分蛋疼了. 改bug的最大心得就是:写好注 ...

  9. (一)Spring Boot修改内置Tomcat端口号--解决tomcat端口被占用的问题

    Spring Boot 内置Tomcat默认端口号为8080,在开发多个应用调试时很不方便,本文介绍了修改 Spring Boot内置Tomcat端口号的方法. 一.EmbeddedServletCo ...

  10. EF中如何为表添加新的字段和映射

    首先先了解一下ef生成的模型edmx的代码,传送门:http://www.cnblogs.com/yushengbo/p/4807715.html 一.添加新的字段 例子就用我现在项目的这个吧,首先在 ...