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,花了一天时间研究了下源码和怎么使用,现将开发常见的侧滑栏和滑动标签页组合效果的使用介绍个大家,希望可以减少 ...
随机推荐
- 串口UART学习笔记(一)
买了一个开发板学习FPGA,找到的各种东西就记录在这个博客里了,同时也方便把自己不会的问题找到的结果记录一下,都是自己手打,所以可能说的话不那么严谨,不那么精准,看到的人要带着自己的思考去看,记住尽信 ...
- 24-集成ASP.NETCore Identity采用EF
1-增加IdentityServer4.AspNetIdentity nuget包 2- StartUp.cs启用增加相应的代码 .AddAspNetIdentity<ApplicationU ...
- gp与 pg 查询进程
select now()-query_start as cost_time,* from pg_stat_activity where current_query not in ( '<IDLE ...
- linux redhat NFS网络共享搭建
nfs网络共享 测试环境: 服务端:redhat6.7 ip:192.168.1.100 客户端:redhat6.7 ip:192.168.1.110 一.服务端 1.创建共享文件夹 权限666即可 ...
- 网络相关知识点:nginx相关概念
今天我们来介绍一下反向代理以及负载均衡相关内容: 反向代理: 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求, 然后将请求转发给内部网络上的服务器,并将从 ...
- ASCII、Unicode、UTF-8编码关系
由于计算机是美国人发明的,因此,最早只有127个字符被编码到计算机里,也就是大小写英文字母.数字和一些符号,这个编码表被称为ASCII编码,比如大写字母A的编码是65,小写字母z的编码是122.但是要 ...
- sql server 对Geography 的增(insert)和查询(select)
insert: Location为 Geography类型 INSERT INTO [oss1].[dbo].[Order] ([Location]) VAL ...
- mysql c 获取error_code
#include <stdio.h> #include <mysql.h> int main(int argc, char **argv) { MYSQL *con = mys ...
- UPA深度性能报告解读
WeTest 导读 UPA作为腾讯WeTest与Unity官方联合打造的客户端性能分析工具,为开发者提供了极大的便利和效能提升.产出的分析报告内容详尽,但您是否真的读懂了报告?是否了解每项数据的含义? ...
- linux 安装 node.js
wget http://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gztar zxvf node-v0.10.26.tar.gzcd node-v0.10. ...