hammer.js 的使用。 （手机手势插件）

捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果。

相关js 到 http://www.bootcdn.cn/  查找和下载。 hammer.js的版本是 v2.0.4

效果说明：

1、（捏开——这个词我不知道咋说了）就是触屏后，双指向外展开。

图片放大到2倍。

并且计算当前的事件点，以此为中心，在屏幕原处放大。（实际上以左上角为中心，然后计算偏移量）

2、捏合

图片缩小回原始状态

3、放大后的滑动事件

hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

注意这句话。刚开始没加这句话的时候，发现 swipeleft 和 swiperight 事件好用，但swipeup 和 swipedown 无效

开始时还想用 pan 事件，但 pan事件是拖动，它需要更多的时间

另外还加了判断，所以只有scale放大到2倍时，才能使用滑动事件

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>Pinch</title>

<script src="script/jquery.min.js"></script>

<script src="script/hammer.min.js"></script>

<style type="text/css">

html, body {width:100%;height:100%;margin:0;padding:0;}

.pinch-zoom-container {overflow: hidden;position: relative;}

.pinch-zoom, .pinch-zoom-container {width: 100%!important;height: 100%!important;}

.pinch-zoom{position:absolute;}

.pinch-zoom img{position:absolute;width:100%;left:50%;top:50%;}

</style>

</head>

<body>

<!-- ***************************** -->

<div class="pinch-zoom-container">

    <div class="pinch-zoom" id="test" data-scale="1">

        <img src="2.jpg" id="testimg">

    </div>

</div>

<!-- ***************************** -->

<script type="text/javascript">

$(function(){

    $("img").load(function(){

        $(this).css("marginLeft",(-1*$(this).width()/2)+"px");

        $(this).css("marginTop",(-1*$(this).height()/2)+"px");

    });

    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素

    var hammertime = new Hammer($(".pinch-zoom")[0]);

    //var hammertime = new Hammer(document.getElementById("test"));

    hammertime.get('pinch').set({ enable: true });

    hammertime.add(new Hammer.Pinch());

    //hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });

    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });//横向和纵向的swipe事件

    hammertime.get('swipe').set({ threshold: 0 });//识别之前所需的最小距离

    hammertime.get('swipe').set({ velocity: 0.2 });//识别之前所需的最小距离

//捏开

hammertime.on("pinchout", function (e) {

        console.log(">>>>>>>>>>>>>>>>");

        var W = $("#testimg").width();

        var H = $("#testimg").height();

        var scale = 2;

        //var mouseX=e.pageX;//鼠标

        //var mouseY=e.pageY;

        var mouseX=e.center.x;//捏开点

        var mouseY=e.center.y;

        if($("#test").attr("data-scale")==1){

            var translateX=0;

            var translateY=0;

            //计算当前点击点相对于图片的偏移比例

            var posX = mouseX/W;

            var posY = mouseY/H;

            translateX= (W * posX / scale) * -1;

            translateY= (H * posY / scale) * -1;

            console.log("###["+translateX+"]###");

            $("#test").css("transformOrigin","0% 0%");

            $("#test").css("transform","scale(2,2) translate("+translateX+"px, "+translateY+"px)");

            $("#test").attr("data-x",translateX);

            $("#test").attr("data-y",translateY);

            $("#test").attr("data-scale",2);

            console.log("点击点的百分比>>>   "+posX+","+posY+"                  ");

            console.log("偏移>>>   "+translateX+","+translateY+"                  ");

            //console.log("鼠标："+mouseX+","+mouseY+"                  ");

            //console.log("捏开开开开>>>>  " + e.center.x + "," + e.center.y+"                  ");

            //console.log("x————————"+ $("#test").attr("data-x") );

            //onsole.log("y————————"+ $("#test").attr("data-y") );

        }

});

//捏合

hammertime.on("pinchin", function (e) {

    $("#test").css("transformOrigin","scale(1,1)");

    $("#test").css("transform","scale(1,1) translate(0px,0px)");

    $("#test").attr("data-x",0);

    $("#test").attr("data-y",0);

    $("#test").attr("data-scale",1);

    console.log("捏合合合合>>              " );

});

function move123(x,y){

    //console.log($("#test").attr("data-scale")+"【】【】")

    if($("#test").attr("data-scale")==2){

        var W = $("#testimg").width();

        var H = $("#testimg").height();

        var winW = $(document).width();

        var winH = $(document).height();

        var marginTop = (winH - H) * -1/2;

        var marginLeft = winW * -1/2 ;

        var marginBottom = -1 * ( winH / 2 -(-1 * marginTop));

        //console.log("marginTop="+marginTop);

        //console.log("marginBottom="+marginBottom);

        var translateX = $("#test").attr("data-x");

        var translateY = $("#test").attr("data-y");

        translateX = parseFloat(translateX) + x;

        translateY = parseFloat(translateY) + y;

        //console.log("marginBottom————::: "+ marginBottom +"           ]");

        //console.log("原始的：translateX = "+ translateX + "      " +"translateY = " + translateY);

        if(translateX>0){translateX=0;console.log("分支: 左往右拨动");}

        if( translateX < marginLeft ){translateX = marginLeft;console.log("分支: 右往左拨动");}

        if( translateY < marginTop ){translateY = marginTop;console.log("分支: 下往上拨动");}

        if( translateY > marginBottom ){translateY = marginBottom;console.log("分支: 上往下拨动");}

        //console.log("改了的：translateX = "+ translateX + "      " +"translateY = " + translateY);

        $("#test").css("transform","scale(2,2) translate("+translateX+"px, "+translateY+"px)");

        $("#test").attr("data-x",translateX);

        $("#test").attr("data-y",translateY);

        $("#test").attr("data-scale",2);

    }

}

hammertime.on("swipe", function (e) {

    //console.log("事件发生点(deltaX) x: "+e.deltaX + "(deltaY)  y: "+e.deltaY);

    if($("#test").attr("data-scale")==2){

        //console.log("拖动结束  " + e.deltaX + "," + e.deltaY);

        move123(e.deltaX,e.deltaY);

    }

});

});

    </script>

</body>

</html>

............

hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果的更多相关文章

  1. javaScript实现图片滚动及一个普通图片轮播的代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. c#如何用代码开启cmd指定命令(如:运行一个手机adb shell命令)

    else if (this.Mode == TravelMode.AutoRecodeMode) { DateTime StartDate = DateTime.Now; string args = ...

  3. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

  4. 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  5. swiper默认显示三个，中间放大且显示全部图片两边显示部分图片的实现方法

    本页面内容最后的红色部分有惊喜哦! 最近在做一个活动页面,要求触摸切换图片时,默认在可视区域中显示三张图片,其中中间的一张图片比其他两张都大且全部显示,而其他两张图片只显示部分即可,于是就想到了swi ...

  6. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

  7. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  8. 【代码笔记】iOS-通过颜色来生成一个纯色图片

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  9. Python中通过Image的open之后，去show结果打不开bmp图片，无法正常显示图片

    在windows的cmd命令行下,使用Python的PIL库打开并显示一个jpg图片: ? 1 2 3 openedImg = Image.open(saveToFile); print " ...

随机推荐

  1. 常用sql语法初级

    博主在工作中,常常需要使用sql语句来进行查询,总结发现,灵活使用这几个要点,就可以应付大部分简单情况. 一.连接:根据两个或多个表中的列之间的关系,从这些表中查询数据. JOIN或INNER JOI ...

  2. 20155310 2016-2017-2 《Java程序设计》第八周学习总结

    20155310 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 第十五章 通用API 通用API •日志:日志对信息安全意义重大,审计.取证.入侵检验等都会 ...

  3. net core web服务器实现

    net core 系列 18 web服务器实现 一. ASP.NET Core Module 在介绍ASP.NET Core Web实现之前,先来了解下ASP.NET Core Module.该模块是 ...

  4. centos下安装必要组件(相当于apt-get install install build-essential)

    在centos下执行 : sudo yum groupinstall 'Development Tools'

  5. C语言面试题2

    预处理 问题1:什么是预编译?何时需要预编译? 答:预编译又称预处理,是整个编译过程最先做的工作,即程序执行前的一些预处理工作.主要处理#开头的指令.如拷贝#include包含的文件代码.替换#def ...

  6. Python之包管理工具：distutils、setuptools、distribute、setup.py、easy_install、easy_install、pip

    在安装Python包的过程中,经常涉及到distutils.setuptools.distribute.setup.py.easy_install.easy_install和pip等等. 介绍:htt ...

  7. ES(4): ES Cluster Security Settings

    目录: ES安全事件回顾 ES集群安全建议 安全访问配置 license更新 ES安全事件回顾 下面是白帽汇监测到针对全球使用广泛的全文索引引擎Elasticsearch的勒索事件: 2017年1月1 ...

  8. linux 信号处理 六（全）

    一.信号及信号来源 信号本质 信号是在软件层次上对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是异步的,一个进程不必通过任何操作来等待信号的到达,事实 ...

  9. CentOS Linux解决Device eth0 does not seem to be present 但是没有发现eth1

    http://www.linuxidc.com/Linux/2012-12/76248.htm 此标题已经是有人写过的了.但是为什么拿来重写? 我复制完,没有发现有eth1这个网卡 为什么呢?需要选中 ...

  10. volatile关键字的作用、原理

    在只有双重检查锁,没有volatile的懒加载单例模式中,由于指令重排序的问题,我确实不会拿到两个不同的单例了,但我会拿到"半个"单例. 而发挥神奇作用的volatile,可以当之 ...