touchSwipe 上下左右滑动,二指缩放 效果不好。
$(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 上下左右滑动,二指缩放 效果不好。的更多相关文章
- 23web app实现上下左右滑动
转载请说明出处:http://blog.csdn.net/wowkk/article/category/1619287 (创意系列) /*最近项目须要苹果电脑,假设您支持学生创业并愿意赞助我们一台,请 ...
- Android上下左右滑动,显示底层布局
转载博客地址:http://www.cnblogs.com/flyme2012/p/4106308.html 闲着没事做了一个小东西.Android的上下左右滑动,显示底层布局.可以做类似于QQ消息列 ...
- Cocos2dx 小技巧(十四)ScrollView实现缩放效果
这阶段心绪比較乱,所以这篇开头就不扯淡了.(谁说大姨夫来了我跟谁急!~~)说到大姨夫我突然想到英雄联盟有个美女讲解叫伊芙蕾亚,她的堂弟ID居然叫:姨夫累呀,好笑吧(呵呵,有点冷~~额,我都说不扯淡了) ...
- JavaScript之屏幕上下左右滑动监听
前言 存在这么一个需求,根据用户在屏幕不同的滑动方向(上.下.左.右),使用js脚本判断出不同的滑动行为,更新网页为不同的界面. 源码 参考了博文[1]的源码,但由于存在一些漏洞,比如:上下滑动事件监 ...
- .Net语言 APP开发平台——Smobiler学习日志:如何快速实现类似于微信的悬浮显示二维码效果
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...
- 【Java Saves!】Session 5:计算机器之三--二指禅
人有十指.人类掰着手指头,发明出了0.1.2-9这十个数字.后来手指头不够用了,便发明出数位(个.十.百.千-)和满十进一的规则,称为十进制. 而计算机靠两个手指头工作.在计算机内部,只有0和1两个数 ...
- Android 四种简单的动画(淡入淡出、旋转、移动、缩放效果)
最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...
- 实现了在android实现左右滑动切换界面的效果
这是实现了在android实现左右滑动切换界面的效果,该效果的源码下载,请到源码天堂下载吧,喜欢的朋友可以研究一下. 布局文件 <?xml version="1.0" enc ...
- 【Android进阶】使用Andbase快速开发框架实现常见侧滑栏和滑动标签页组合效果
最近闲来无事,在网上寻找源代码看,突然发现了一个国内技术牛人开发的快速开发框架Andbase,花了一天时间研究了下源码和怎么使用,现将开发常见的侧滑栏和滑动标签页组合效果的使用介绍个大家,希望可以减少 ...
随机推荐
- C语言#ifdef等宏的妙用
这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条件 ...
- Applied Cloud Deep Semantic Recognition: Advanced Anomaly Detection(应用云深层语义识别:高级异态检测)
亚马逊链接 引言 (by Mehdi Roopaei & Paul Rad) 异态检测与情境感知 在数据分析领域,异态检测讲的是在一个数据集中,发现到其中不符合预期模式的物体,动作,行为或事件 ...
- gg_pie
gg_pie gg_pie PeRl 今天尝试了一下用ggplot2画饼图,转换一下极坐标就可以实现,但是和以前画heatmap的时候不一样的是,我们在卷坐标的时候需要让数据集中在一个坐标轴上. 另一 ...
- Multimodal Machine Learning:A Survey and Taxonomy 综述阅读笔记
该笔记基于:Multimodal Machine Learning:A Survey and Taxonomy 该论文是一篇对多模态机器学习领域的总结和分类,且发表于2017年,算是相当新的综述了.老 ...
- 成都Uber优步司机奖励政策(1月25日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Java: 数组、列表和集合的互相转换
1. Array 转 List String[] city = {"Nanjing","Shanghai","Beijing"}; List ...
- IO 转换流
package TestIo; import java.io.*; /** * 转换流 */ public class TestConvertStream { public static void m ...
- python学习五
打包代码与数据 数据结构要与数据匹配,数据结构影响代码的复杂性 列表 集合 字典 #创建与初始化 cleese={} cleese2=dict() cleese["name"] ...
- hdu2199Can you solve this equation?(解方程+二分)
Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- 【CentOS】下安装RabbitMQ教程
系统版本: 安装依赖: 由于RabbitMQ依赖Erlang, 所以需要先安装Erlang. Erlang的安装方式大概有两种: (1) Erlang Solution安装(推荐) wget http ...