html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

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

		<style>

			.demo-box {

				width: 300px;

				height: 300px;

				overflow: hidden;

				position: relative;

			}

			.demo-box img {

				height: 500px;

				width: 1900px;

				position: absolute;

				margin-left: -950px;

				pointer-events: none;

				margin-top: -220px;

				left: 50%;

				top: 50%;

				max-width: none;

			}

			.demo-box img.active {

				display: block;

			}

			.demo-box .page-num {

				position: absolute;

				bottom: 5px;

				left: 50%;

				margin-left: -20px;

				color: white;

				z-index: 999;

				background: rgba(170, 170, 170, 0.5);

				padding: 3px;

				border-radius: 5px;

				border: 1px solid black;

				pointer-events: none;

			}

			.page-num .active {

				color: red;

			}

			.demo-box .page-num {

				color: white;

				pointer-events: none;

			}

			.demo img {

				display: inline-block;

			}

			.box img {

				display: none;

			}

			.demo-overlay {

				position: absolute;

				top: 0;

				left: 0;

				right: 0;

				bottom: 0;

				background: rgba(70, 70, 70, 0.8);

				display: none;

			}

			.demo-overlay img {

				width: 50px;

				height: 50px;

				position: absolute;

				top: 50%;

				left: 50%;

				margin-left: -25px;

				margin-top: -25px;

			}

		</style>

	</head>

	<body class="homepage">

		<div class="pan demo-box demo">

			<img src="img/box.png" />

		</div>

		<br />

		<br />

		<br />

		<br />

		<div class="pinch demo-box demo">

			<img src="img/box.png" />

		</div>

		<br />

		<br />

		<br />

		<br />

		<div class="rotate demo-box demo">

			<img src="img/box.png" />

		</div>

		<br />

		<br />

		<br />

		<br />

		<div class="swipe demo-box box">

			<img src="img/xsqy.png" class="active" />

			<img src="img/jfsc.png" />

			<img src="img/fx.png" />

			<div class="page-num">

				<span class="active">1</span>

				<span class="">2</span>

				<span class="">3</span>

			</div>

		</div>

		<br />

		<br />

		<br />

		<br />

		<div class="tap demo-box box">

			<img src="img/xsqy.png" class="active" />

			<img src="img/jfsc.png" />

			<img src="img/fx.png" />

			<div class="page-num">

				<span class="active">1</span>

				<span class="">2</span>

				<span class="">3</span>

			</div>

		</div>

		<br />

		<br />

		<br />

		<br />

		<div class="press demo-box demo">

			<img src="img/box.png" />

			<div class="demo-overlay">

				<img src="img/shouhuodizhicheckz.png">

			</div>

		</div>

	</body>

	<script type="text/javascript" src="js/jquery.min.js"></script>  //自行下载

	<script type="text/javascript" src="js/hammer.js"></script>  //自行下载

	<script type="text/javascript" src="js/hammer-index.js"></script>  //以下代码

</html>

hammer-index.js

$(function() {

	(function() {

		var img, margin;

		new Hammer($(".pan")[0], {

			domEvents: true

		});

		$(".pan").on("panstart", function(e) {

			img = $(".pan img");

			margin = parseInt(img.css("margin-left"), 10);

		});

		$(".pan").on("pan", function(e) {

			var delta = margin + e.originalEvent.gesture.deltaX;

			console.log(delta);

			if(delta >= -1750 && delta <= -150) {

				img.css({

					"margin-left": margin + e.originalEvent.gesture.deltaX

				});

			}

		});

	})();

	// pinch

	(function() {

		var ham = new Hammer($(".pinch")[0], {

			domEvents: true

		});

		var width = $(window).width();

		var height = $(window).height();

		var left = 950;

		var top = 220;

		ham.get('pinch').set({

			enable: true

		});

		$(".pinch").on("pinch", function(e) {

			console.log("pinch");

			if(width * e.originalEvent.gesture.scale >= 300) {

				$(this).find("img").css({

					width: width * e.originalEvent.gesture.scale,

					"margin-left": -left * e.originalEvent.gesture.scale,

					height: height * e.originalEvent.gesture.scale,

					"margin-top": -top * e.originalEvent.gesture.scale

				});

			}

			console.log(e.originalEvent.gesture.scale);

		});

		$(".pinch").on("pinchend", function(e) {

			width = width * e.originalEvent.gesture.scale;

			height = height * e.originalEvent.gesture.scale;

			left = left * e.originalEvent.gesture.scale;

			top = top * e.originalEvent.gesture.scale;

			console.log(width);

		});

	})();

	// rotate

	(function() {

		var ham = new Hammer($(".rotate")[0], {

			domEvents: true

		});

		var liveScale = 1;

		var currentRotation = 0;

		ham.get('rotate').set({

			enable: true

		});

		$(".rotate").on("rotate", function(e) {

			alert(1)

			var rotation = currentRotation + Math.round(liveScale * e.originalEvent.gesture.rotation);

			$(this).find("img").css("transform", "rotate( " + rotation + "deg)");

		});

		$(".rotate").on("rotateend", function(e) {

			currentRotation += Math.round(e.originalEvent.gesture.rotation);

		});

	})();

	(function() {

		new Hammer($(".swipe")[0], {

			domEvents: true

		});

		var current = 0;

		var imgs = $(".demo-box.swipe img");

		var pages = $(".swipe .page-num span");

		$(".swipe").on("swipeleft", function(e) {

			if(imgs[current + 1]) {

				imgs.removeClass("active");

				imgs.eq(++current).addClass("active");

				pages.removeClass("active");

				pages.eq(current).addClass("active");

			}

		});

		$(".swipe").on("swiperight", function(e) {

			if(imgs[current - 1]) {

				imgs.removeClass("active");

				imgs.eq(--current).addClass("active");

				pages.removeClass("active");

				pages.eq(current).addClass("active");

			}

		});

	})();

	// tap

	(function() {

		new Hammer($(".tap")[0], {

			domEvents: true

		});

		var current = 0;

		var imgs = $(".demo-box.tap img");

		var pages = $(".tap .page-num span");

		$(".tap").on("tap", function(e) {

			console.log("tap");

			if(imgs[current + 1]) {

				current++;

			} else {

				current = 0;

			}

			console.log(current);

			imgs.removeClass("active");

			imgs.eq(current).addClass("active");

			pages.removeClass("active");

			pages.eq(current).addClass("active");

		});

	})();

	// press

	(function() {

		new Hammer($(".press")[0], {

			domEvents: true

		});

		$(".press").on("press", function(e) {

			$(".demo-overlay").toggle();

		});

	})();

})

hammer.js方法总结(只做了一个简单的demo)的更多相关文章

  1. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  2. 一个简单的demo学习Android远程Service（AIDL的使用）

    这是milo很早之前写在论坛上的一个帖子,现在整理出来,milo也复习一下一般来说Android 的四大组件都是运行在同一个进程中的,但远程Service运行在不同的进程里.这进程间的通信是使用了An ...

  3. MyBatis 学习记录1 一个简单的demo

    主题 最近(N个月前)clone了mybatis的源码..感觉相比于spring真的非常小...然后看了看代码觉得写得很精简...感觉我的写代码思路和这个框架比较相似(很难具体描述...就是相对来说比 ...

  4. JS 的execCommand 方法 做的一个简单富文本

    execCommand 当一个 HTML 文档切换到设计模式(designMode)时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容.大多数命令影响文档的选择( ...

  5. 我做的一个websocket的demo(php server)

    notice: 通过命令行执行php文件  如 php -q c:\path\server.php 通过本地web服务器访问 http://127.0.0.1/websocket/index.php即 ...

  6. 如何用vs2013开发人员命令提示工具执行一个方法（一个简单的demo）

    在任何一个编辑器中编写一个静态的Main方法,必须是静态且名为Main的方法,并将Main方法所在的类文件命名为yang.cs(这个名字随便命名),如图-1. 图-1 打开你的vs2013开发人员命令 ...

  7. 用if做了一个简单的猜拳游戏（做的不好还请指点，谢谢！）

    #include "stdio.h" #include "stdlib.h" #include "time.h" //随机函数的头文件 ma ...

  8. 用ios做的一个简单的记事本

    #import "ViewController.h" @interface ViewController ()@property (weak, nonatomic) IBOutle ...

  9. 使用extjs做的一个简单grid

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

随机推荐

  1. Linux内核中的wake_lock[【转】

    本文转载自:https://blog.csdn.net/wuyb2011/article/details/78542233?locationNum=11&fps=1 #include < ...

  2. Icons - Material Design各种ICON图标大全

    Icons - Material Design https://material.io/tools/icons/?icon=account_balance&style=baseline

  3. ZOJ 3829 Known Notation（贪心）题解

    题意:给一串字符,问你最少几步能变成后缀表达式.后缀表达式定义为,1 * 1 = 1 1 *,题目所给出的字串不带空格.你可以进行两种操作:加数字,交换任意两个字符. 思路:(不)显然,最终结果数字比 ...

  4. Unsupervised Image-to-Image Translation Networks --- Reading Writing

    Unsupervised Image-to-Image Translation Networks --- Reading Writing 2017.03.03 Motivations: most ex ...

  5. TortoiseGit自动记住用户名密码的方法

    TortoiseGit自动记住用户名密码的方法 windows下比较比较好用的git客户端有2种: msysgit + TortoiseGit(乌龟git) GitHub for Windows gi ...

  6. Java转义形如nbsp;的HTML编码

    需要引用一个maven <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 --> <d ...

  7. 【Python】【有趣的模块】tqdm | inspect

    tqdm """ [tqdm] 显示循环的进度条,再也不用担心程序跑到哪里还要跑多久了 tqdm 可以直接包裹iterable对象 from tqdm import tq ...

  8. mark mem

    韦达定理 http://baike.baidu.com/link?url=M45ozZEnQ4BtKD7l22WWgQuGnmDYV7TFynQcPEO2Tt8leYGhyEa1flt-RM34NG4 ...

  9. AQS是什么？

    AQS介绍 AQS,即AbstractQueuedSynchronizer, 队列同步器,它是Java并发用来构建锁和其他同步组件的基础框架.来看下同步组件对AQS的使用: AQS是一个抽象类,主是是 ...

  10. [转]pugixml使用教程

    转自:https://www.cnblogs.com/ltm5180/p/3989125.html pugixml介绍 pugixml是一个高性能.轻量级并且简单易用的xml解析库,支持UTF8 en ...